javascript - 单击时连续滚动颜色

Question

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

 $(document).ready(function(){

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

标签： javascript

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>