jQuery点击改变背景颜色

Question

我尝试使用 flexslider 在事件幻灯片上制作动画背景颜色，但我不知道该怎么做...所以我尝试制作一些简单但效果不佳的东西。

我有 4 张幻灯片，所以我只想在单击下一张幻灯片时更改 4 种颜色...

j查询

  $( function() {
  $('.dot li').click( function() {
    $('.wrapper').css('background', '#749e4f');
    $('.dot li').click( function() {
    $('.wrapper').css('background', '#d16b42');

  });
});

导航 | flex slider

<div class="slider-nav">
<ul class="dot">
<li><a href="#">iphone 5<span class="bullet">1</span></a></li>
<li><a href="#">htc one <span class="bullet">2</span></a></li>
<li><a href="#">ipad mini<span class="bullet">3</span></a> </li>
<li><a href="#">droid z<span class="bullet">4</span></a></li>
</ul>
</div>

感谢任何想法:)

Answer 1

这可能对你有帮助，因为你是初学者，我想解释一下下面的代码，以便你更好地理解。

1. 将颜色保存在数组 中。数组的长度必须是您拥有的 li 的数量。
2. 为所有 li 元素创建一个通用的 click 处理程序。(它已经在您的代码中)

3. 在点击处理程序中，只需根据点击的 Li 元素的 index 引用数组来更改目标元素的颜色。

   $( function() {
      var xColors =['red','green','yellow','blue'];
      $('.dot li').click( function() {
        $('.wrapper').css('background', xColors[$(this).index()] );    
      });
   });
   

LIve - DEMO