Question

我想通过单击li元素来滚动浏览3种不同的颜色。（这只会更改每个单独的li元素）。

 $(document).ready(function(){

             $("li").click( function() {
               $("li").css("color", "red", "green", "black");
             });
 });

Answer 1

使用数组保存颜色值和数据属性，以保持颜色在数组中的位置。

$(document).ready(function() {
  let colors = ["red", "green", "black"];
  $('li').click(function() {
    // cache the element reference
    let $this = $(this);
    // get count value if not found then set to 0
    let c = $this.data('count') || 0;

    // set color based on count value
    $this.css("color", colors[c]);

    // update count value
    $this.data('count', ++c % colors.length);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
  <li>sss</li>
</ul>

单击时连续进行颜色滚动

1 个答案: