Jquery 如何更改多个divs id/class以更改样式？
Jquery 如何更改多个divs id/class以更改样式？,jquery,Jquery,$（“#容器”）。每个（函数）{ $（this）.find（'.taskName'）.each（函数（）{ if（$（this）.attr（'value'）=='Each'）{ $（this.css（'div#gold div.gold'，'gold'）； $（this）.find（'.taskName'）.each（函数（）{ if（$（this.attr（'value'）=='Offer'）{ $（this.css（'div#red div.red'，'red'）； $（this）.find
$（“#容器”）。每个（函数）{
$（this）.find（'.taskName'）.each（函数（）{
if（$（this）.attr（'value'）=='Each'）{
$（this.css（'div#gold div.gold'，'gold'）；
$（this）.find（'.taskName'）.each（函数（）{
if（$（this.attr（'value'）=='Offer'）{
$（this.css（'div#red div.red'，'red'）；
$（this）.find（'.taskName'）.each（函数（）{
if（$（this.attr（'value'）=='Buying'）{
$（this.css（'div#green div.green'，'green'）；
}
});
});
每个
全部
提供
购买
输入#硬币{
字体系列：Calibri，无衬线，日内瓦，Verdana；
字号：1em；
颜色：黑色；
边界：无；
文本对齐：居中；
背景图片：url(http://kennenmen.netai.net/images/gcoin.png)
}
输入{
显示：块；
保证金：0自动；
高度：14px；
}
挑选{
字体系列：Calibri，无衬线，日内瓦，Verdana；
字号：1em；
颜色：黑色；
边界：无；
文本对齐：居中；
-webkit外观：无；
}
挑选{
显示：块；
保证金：0自动；
}
/*黄金*/
分区#金价箱1{
背景：无；
宽度：自动；
高度：自动；
边框：1px实心#361801；
浮动：左；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
}
金价箱2{
背景色：#EEC43A；
边框：1px实心#FDFF82；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
左侧填充：5px；
右侧填充：5px；
垫底：5px；
}
分区#金价箱3{
边框：1px实心#FDFF82；
}
金价箱4{
边框：1px实心#361801；
}
黄金价格箱5部{
边框：1px实心#e1e1；
背景：白色；
宽度：153px；
最小高度：51px；
高度：自动；
填充波顿：25px；
}
分区#黄金选择框1{
边框：1px实心#FDFF82；
}
分区#黄金选择框2{
边框：1px实心#361801；
}
分区#黄金选择框3{
边框：1px实心#e1e1；
背景：白色；
}
/*绿色的*/
绿色价格箱1部{
背景：无；
宽度：自动；
高度：自动；
边框：1px实心#013601；
浮动：左；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
}
绿色价格箱2{
背景色：#39EE39；
边框：1px实心#83FF83；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
左侧填充：5px；
右侧填充：5px；
垫底：5px；
}
绿色价格箱3分部{
边框：1px实心#83FF83；
}
绿色价格箱4{
边框：1px实心#013601；
}
绿色价格箱5部{
边框：1px实心#e1e1；
背景：白色；
宽度：153px；
最小高度：51px；
高度：自动；
填充波顿：25px；
}
第1组{
边框：1px实心#83FF82；
}
第2组{
边框：1px实心#013601；
}
第3组{
边框：1px实心#e1e1；
背景：白色；
}
/*红色的*/
div#redpricebox1{
背景：无；
宽度：自动；
高度：自动；
边框：1px实心#360101；
浮动：左；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
}
div#redpricebox2{
背景色：#EE3939；
边框：1px实心#FF8383；
边框左上半径：10px；
边框右上角半径：10px；
边框左下半径：10px；
边框右下半径：10px；
左侧填充：5px；
右侧填充：5px；
垫底：5px；
}
div#redpricebox3{
边框：1px实心#FF8383；
}
div#redpricebox4{
边框：1px实心#360101；
}
第5部分{
边框：1px实心#e1e1；
背景：白色；
宽度：153px；
最小高度：51px；
高度：自动；
填充波顿：25px；
}
div#红色选择框1{
边框：1px实心#FF8383；
}
div#红色选择框2{
边框：1px实心#360101；
}
div#红色选择框3{
边框：1px实心#e1e1；
背景：白色；
}
我正试图根据选择/选项框更改div框的颜色。
所有人和每个人都应该使盒子变成金色
购买会使盒子变绿
报价应使箱子变成红色
我试过什么？
作为编码新手，我没有尝试过所有的方法，我尝试过改变jquery，但没有结果 我必须保留什么？
保留.css中的所有样式并保留所有div的当前.class和#id是至关重要的
盒子应该是什么样子
感谢所有能够帮助我的人，非常感谢您的帮助！您将其变得非常复杂，您可以选择一个最近的包装器元素并更改其类名，然后使用CSS继承轻松设置子元素的样式，而不是更改许多ID和类并以低效的方式查询DOM
var colors = {
Each: 'gold',
All: 'gold',
Offer: 'red',
Buying: 'green'
}
$('select.qty').change(function(){
var cls = colors[this.value];
$('#container').attr('class', cls);
});
还要注意的是，
cssvar colors = {
Each: 'gold',
All: 'gold',
Offer: 'red',
Buying: 'green'
}
$('select.qty').change(function(){
var cls = colors[this.value];
$('#container').attr('class', cls);
});
// 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;
});
<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>
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]);
});
/* 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;
}