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

如何简化我的jQuery？

1 个答案: