Как я могу упростить jQuery?

Question

И если бы вы могли дать небольшое объяснение того, что вы можете ясно видеть, я недопонимаю, это было бы отлично!

$('#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) и т. Д. На выбранное значение.

Answer 1

Дайте всем вашим <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>