Jquery活动链接更改src

Question

我在网站上有一个视差效果，我想制作活动点。但问题是每个点在活动时都必须不同

1. 绿色
2. 橙色
3. 薄荷
4. 蓝色

当它们不活跃时，我希望它们是白色的。

对我来说非常重要的是更改图像的 src 而不是 .css

这是一种颜色活动点的代码：

<ul class="paralax">
              <li><a href="#intro" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" /></a></li>
              <li><a href="#second" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link"  /></a></li>
              <li><a href="#third" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link"  /></a></li>
              <li><a href="#fifth" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link" /></a></li>
              <li><a href="#six" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link" /></a></li>
</ul>

和jquery：

$('document').ready(function() {
            $('.paralax img').click(function(e) {
            e.preventDefault();
            $('.paralax img').attr("src","images/dot.png");
            $(this).attr("src","images/dot-green.png");
        });
        });

Link to jsFiddle

Answer 1

您可以将所需的备用图像作为数据属性存储在<a>（或img 或li...）上

  <li><a href="#intro" data-alt-image="dot-green.png" title="Next Section">
    <img src="https://path/to/dot.png" />
  </a></li>

然后在点击时指向它，重置其他的。

$('document').ready(function() {
    $('.paralax a').click(function(e) {
        // our alt image, stored on the <a>
        var altImg = $(this).attr('data-alt-image'),
            // keep the demo readable
            db = "https://dl.dropboxusercontent.com/u/64675374/circle2/";

        e.preventDefault();

        // reset the last one
        $('.paralax')
            .find('.active').removeClass('active')
            .find('img').attr("src", db+"dot.png");

        // point to the active image in the data-alt-image attribute              
        $(this).addClass('active').find('img').attr("src", db+altImg);
    });
});

更新Fiddle

Answer 2

你可以试试这样的（1.Sequential Colors 2.Random Colors）：

$('document').ready(function() {
    var dots = ['dot-green.png', 'dot-orange.png', 'dot-mint.png', 'dot-blue.png'];
    $('.paralax img').click(function(e) {
        e.preventDefault();
        // use this for sequential
        var dot = $(this).closest('li').index();
        // use this for random
        // var dot =  Math.floor(Math.random() * (dots.length - 1) +1);
        $('.paralax img').attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png");
        $(this).attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/" + dots[dot]);
    });
});