jquery - 如何更改多个 div id/类以使样式发生变化？

Question

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 框颜色。
所有和每个都应该使盒子变成金色
购买时包装盒应为绿色
优惠应使框呈红色

我尝试了什么？
作为编码新手，我还没有尝试过更改 jquery 的所有方法，但没有结果。

我必须保留什么？
至关重要的是，我将所有样式保留在 .css 中，并保留所有 div 的当前 .class 和 #ids。

盒子应该是什么样子
http://jsfiddle.net/GHuwV/4/

感谢任何可以帮助我的人，非常感谢您的帮助!

Answer 1

我有点讨厌这种方法，它看起来本质上过于复杂，但这有效(尽管我几乎希望它没有):

// tying the selected option to the required colours:
var map = {
    'Each' : 'gold',
    'All' : 'gold',
    'Offer' : 'red',
    'Buying' : 'green'
},
// using the currently selected value to identify what string we're looking for in the id
    oldColour = map[$('#container select').val()];

$('select').change(function(){
    // caching variables, though it may not be needed
    var that = this,
        $that = $(that),
        container = $('#container'),
        colour = map[that.value];
    // finding all the elements whose id starts with the currently-selected colour
    container.find('[id^="' + oldColour + '"]').each(function(){
        // iterating over each of those elements, replacing the oldColour with the new colour
        this.id = this.id.replace(oldColour,colour);
    });
    // updating the oldColour variable for the next time
    oldColour = colour;
});

JS Fiddle demo .

代码的改进方法如下，它依赖于更改 #container 对象的单个类，而该类又依赖于更新的 HTML:

<div id="container">
    <div class="pricebox1">
        <div class="pricebox2">
            <input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; maxlength=3 />
            <div class="selectbox1">
                <div class="selectbox2">
                    <div class="selectbox3">
                        <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 class="pricebox3">
                <div class="pricebox4">
                    <div class="pricebox5"></div>
                </div>
            </div>
        </div>
    </div>
</div>

使用极其简单的 jQuery:

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

// the following adds the class of the currently-selected colour to the #container
$('#container').addClass(map[$('#container select').val()]);

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

JS Fiddle demo .

上面的 CSS 也得到了简化:

/* styles the elements when the #container is .gold */
.gold .pricebox1,
.gold .pricebox2,
.gold .pricebox3,
.gold .pricebox4 {
    background-color: #EEC43A;
    border:1px solid #FDFF82;
}
/* styles the elements when the #container is .green */
.green .pricebox1,
.green .pricebox2,
.green .pricebox3,
.green .pricebox4 {
    background-color: #0f0;
    border:1px solid #FDFF82;
}
/* styles the elements when the #container is .red */
.red .pricebox1,
.red .pricebox2,
.red .pricebox3,
.red .pricebox4 {
    background-color: #f00;
    border:1px solid #FDFF82;
}
/* base-styles that don't change */
.pricebox1 {
    background: none;
    width:auto;
    height:auto;
    border:1px solid #361801;
    float:left;
    border-radius: 10px;
}
.pricebox2 {
    background-color: #EEC43A;
    border:1px solid #FDFF82;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.pricebox3 {
    border:1px solid #FDFF82;
}
.pricebox4 {
    border:1px solid #361801;
}
.pricebox5 {
    border:1px solid #E1E1E1;
    background: white;
    width: 153px;
    min-height: 51px;
    height: auto;
    padding-bottom:25px;
}
.selectbox1 {
    border:1px solid #FDFF82;
}
.selectbox2 {
    border:1px solid #361801;
}
.selectbox3 {
    border:1px solid #E1E1E1;
    background: white;
}