如何簡化我的jQuery？

-1

如果你可以提供一個你能清楚看到的東西的小解釋，那麼我就會誤會，那會很棒！如何簡化我的jQuery？

$('#my_select11').change(function() { 
$('#my_quest').css('color', $(this).val()); 
}) 
$('#my_select12').change(function() { 
$('#my_clock').css('color', $(this).val()); 
}) 
</script> 


<td> 
      <div class="styled-select"> 
      <select id="my_select11"> 
       <option value="#0079C2"></option> 
       <option value="#004b77"></option> 
       <option value="#EE7B2C"></option> 
       <option value="#EE7C2E"> </option> 
       <option value="#CF641A"></option> 
       <option value="#333"></option> 
       <option value="#666"></option> 
       <option value="#DAD9D9"></option> 
       <option value="#FAFAFA"></option> 
      </select>      
      </div> 
     </td> 
    </tr>

這實質上是一個充滿選擇的表格。每次你點擊一個選擇來改變這個值，它就會將fa fa-awesome（my_mobile）等改變成所選的值。

來源

2015-10-14 S.Words

我想這一天的關鍵詞是[類]（https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors） – adeneo

在學習的jQuery總是最容易學習如何使用ID選擇器。開始學習如何在通用元素上使用公共類並使用遍歷或索引。可能會削減你的約4行。需要顯示有問題的html基本結構 – charlietfl

爲您的所有<select>元素指定一個數據屬性，指示應更改哪個其他元素的顏色。給他們所有同一個班級，這樣你就可以編寫一個處理程序。

$(".color").change(function() { 
 
    $($(this).data("rel")).css("color", $(this).val()); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Question color: 
 
<select class="color" data-rel="#my_quest"> 
 
    <option value="">--Choose--</option> 
 
    <option value="red">Red</option> 
 
    <option value="blue">Blue</option> 
 
    </select> 
 
<br/> 
 
Clock color: 
 
<select class="color" data-rel="#my_clock"> 
 
    <option value="">--Choose--</option> 
 
    <option value="red">Red</option> 
 
    <option value="blue">Blue</option> 
 
    </select> 
 
<br/> 
 
<div id="my_quest">Question</div> 
 
<div id="my_clock">Clock</div>

來源

2015-10-14 21:49:15 Barmar

如何簡化我的jQuery？

回答

相關問題