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;
}

Answer 2

你已经使它变得非常复杂，而不是改变许多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方法用于向元素添加内联样式，但您使用的方法不正确。

如何更改多个div ids / class以便样式更改？

2 个答案: