2

http://jsfiddle.net/GHuwV/2/

$("#container").each(function () {

    $(this).find('.taskName').each(function () {
        if ($(this).attr('value') == 'Each') {
            $(this).css('div#gold div.gold', 'gold');
            $(this).find('.taskName').each(function () {
                if ($(this).attr('value') == 'Offer') {
                    $(this).css('div#red div.red', 'red');
                    $(this).find('.taskName').each(function () {
                        if ($(this).attr('value') == 'Buying') {
                            $(this).css('div#green div.green', 'green');
                        }
                    });

                });

<div id="container">
    <div id="goldpricebox1">
        <div id="goldpricebox2">
            <input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; maxlength=3 />
            <div id="goldselectbox1">
                <div id="goldselectbox2">
                    <div id="goldselectbox3">
                        <select name="qty">
                            <option value="Each" selected>Each</option>
                            <option value="All"> All</option>
                            <option value="Offer">Offer</option>
                            <option value="Buying">Buying</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="goldpricebox3">
                <div id="goldpricebox4">
                    <div class="goldpricebox5"></div>
                </div>
            </div>
        </div>
    </div>
</div>

input#coin {
    font-family:Calibri, sans-serif, Geneva, Verdana;
    font-size:1em;
    color: black;
    border: none;
    text-align: center;
    background-image: url(http://kennenmen.netai.net/images/gcoin.png)
}
input {
    display: block;
    margin : 0 auto;
    height: 14px;
}
select {
    font-family:Calibri, sans-serif, Geneva, Verdana;
    font-size:1em;
    color: black;
    border: none;
    text-align: center;
    -webkit-appearance: none;
}
select {
    display: block;
    margin : 0 auto;
}
/*GOLD*/
 div#goldpricebox1 {
    background: none;
    width:auto;
    height:auto;
    border:1px solid #361801;
    float:left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
div#goldpricebox2 {
    background-color: #EEC43A;
    border:1px solid #FDFF82;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
div#goldpricebox3 {
    border:1px solid #FDFF82;
}
div#goldpricebox4 {
    border:1px solid #361801;
}
div.goldpricebox5 {
    border:1px solid #E1E1E1;
    background: white;
    width: 153px;
    min-height: 51px;
    height: auto;
    padding-botttom:25px;
}
div#goldselectbox1 {
    border:1px solid #FDFF82;
}
div#goldselectbox2 {
    border:1px solid #361801;
}
div#goldselectbox3 {
    border:1px solid #E1E1E1;
    background: white;
}
/*GREEN*/
 div#greenpricebox1 {
    background: none;
    width:auto;
    height:auto;
    border:1px solid #013601;
    float:left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
div#greenpricebox2 {
    background-color: #39EE39;
    border:1px solid #83FF83;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
div#greenpricebox3 {
    border:1px solid #83FF83;
}
div#greenpricebox4 {
    border:1px solid #013601;
}
div.greenpricebox5 {
    border:1px solid #E1E1E1;
    background: white;
    width: 153px;
    min-height: 51px;
    height: auto;
    padding-botttom:25px;
}
div#greenselectbox1 {
    border:1px solid #83FF82;
}
div#greenselectbox2 {
    border:1px solid #013601;
}
div#greenselectbox3 {
    border:1px solid #E1E1E1;
    background: white;
}
/* Red */
 div#redpricebox1 {
    background: none;
    width:auto;
    height:auto;
    border:1px solid #360101;
    float:left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
div#redpricebox2 {
    background-color: #EE3939;
    border:1px solid #FF8383;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
div#redpricebox3 {
    border:1px solid #FF8383;
}
div#redpricebox4 {
    border:1px solid #360101;
}
div.redpricebox5 {
    border:1px solid #E1E1E1;
    background: white;
    width: 153px;
    min-height: 51px;
    height: auto;
    padding-botttom:25px;
}
div#redselectbox1 {
    border:1px solid #FF8383;
}
div#redselectbox2 {
    border:1px solid #360101;
}
div#redselectbox3 {
    border:1px solid #E1E1E1;
    background: white;
}

私は何をしようとしていますか？
選択/オプション ボックスに応じて div ボックスの色を変更しようとしています。
All and Each はボックスをゴールドにする
必要があります Buy はボックスを緑色にする必要があります
Offer はボックスを赤色にする必要があります

私は何を試しましたか？
コーディングが初めてなので、jquery を変更しようとしたすべてのことを試したわけではありませんが、結果はありません。

何を守らなければなりませんか？
すべてのスタイリングを .css に保持し、すべての div の現在の .class と #id を保持することが重要です。


ボックスがどのように見えるか
http://jsfiddle.net/GHuwV/4/

私を助けてくれる人に感謝します。あなたの助けは大歓迎です!

4

2 に答える 2

1

多くの ID とクラスを変更して非効率的な方法で DOM を照会する代わりに、非常に複雑にしました。最も近いラッパー要素を選択してそのクラス名を変更し、CSS 継承を使用して子孫要素を簡単にスタイル設定できます。

var colors = {
   Each: 'gold',
   All: 'gold',
   Offer: 'red',
   Buying: 'green'
} 

$('select.qty').change(function(){
   var cls = colors[this.value];
   $('#container').attr('class', cls);
});

cssまた、要素にインライン スタイルを追加するために method が使用されていることに注意してください。これは間違って使用しています。

于 2013-04-21T01:57:00.107 に答える