如何更改多個div ID /類，以便樣式更改？

http://jsfiddle.net/GHuwV/2/如何更改多個div ID /類，以便樣式更改？

$("#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/

感謝人誰可以幫我爲你的幫助深表感謝！

來源

2013-04-21 Kennen Lasuni

'$（本）的.css（ '＃DIV金div.gold'， '金'）;'？你讀過'.css（）'文檔嗎？ – undefined 2013-04-21 01:45:03

因爲我說我是jquery的新手，我看過一些例子，但他們只改變了背景顏色或文本顏色。 – 2013-04-21 01:46:37

需要重新組織代碼...'var $ this = $（this）'來緩存變量，更易於閱讀和提高性能。並且在給定的DOM中沒有類'.test'的元素，所以您的代碼將永遠不會執行 – 2013-04-21 01:49:50

我有點討厭這種做法，它似乎天生就過於複雜，但這工作（雖然我幾乎希望它沒有）：

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

來源

2013-04-21 02:10:27

+1用於更改和使用類名。 – undefined 2013-04-21 02:30:39

@undefined：謝謝！我原本要寫出答案，並且避免了整個複雜性問題;但任何以'我有點討厭這個......'開頭的答案，如果沒有提供一個改進的選擇，真的不能完成（我真的無法自己去編輯'我有點討厭這個...... '部分）。 – 2013-04-21 02:33:46

你已經使它變得非常複雜，而不是改變很多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方法用於添加內嵌樣式的元素，你是不正確的使用它。

來源

2013-04-21 01:57:00 undefined

這是否意味着我必須將所有div都改爲類而不是id？ – 2013-04-21 01:59:54

@KennenLasuni我不知道你的ID是什麼意思，我可以看到許多ID和類與單一模式的樣式相關，我會這樣做，再加上改變ID不是一個好主意。 – undefined 2013-04-21 02:05:31

'id =「example」'to'class =「example」'。那麼，我該如何定位標有金色，紅色和綠色的css或不是我？我想我明白它在做什麼，但是這會要求我改變每個盒子的造型嗎？是否有可能影響色調盒子？那麼我可以有一個默認框，然後有一些方法來改變它的色調以獲得不同的框顏色。 – 2013-04-21 02:10:31

如何更改多個div ID /類，以便樣式更改？

回答

相關問題