Question

好的，到目前为止，我已经有了这个，它在某种程度上有效，

$('a').click(function(e) 
{  
   e.preventDefault();  
   var preFix = $(this).attr("href");
   $('img.swap').each(
       function() { this.src = this.src.replace('.gif', (preFix)+'.gif');
   }); 
});

这会通过“HREF”链接将其添加到图像的末尾。问题是，当我点击第一个链接时，它交换图像就好了，但第二次我点击图像中断的5个链接中的一个。

我猜它是因为它只是在第一个末尾添加了第二个前缀。我已经尝试了一些东西，但它最终会打破整个事情。

我需要做两件事：

1）当你点击一个链接然后另一个链接我想要删除旧的前缀和新的前缀。

2）如果点击两次相同的链接，我需要先添加前缀然后删除前缀。

非常感谢

Answer 1

试试这个：:-D

$('img.swap').each(function{
    $(this).data('current_image', this.src);
    //saves the default image in data
})
$('a').click(function(e){  
       e.preventDefault();  
       var preFix = $(this).attr("href");
       $('img.swap').each(
       function() { 
         if($(this).data('prefix') != prefix){
           this.src = $(this).data('current_image').replace('.gif', (preFix)+'.gif');
           $(this).data('prefix', prefix)
         }
         else {
           this.src = $(this).data('current_image');
           $(this).data('prefix', '')
         }
       }); 
});

$(this).data(..)将变量存储在该特定DOM元素中，而不是在执行此操作后，您可以执行布尔运算以根据您拥有的值进行查询： - ）

这里有更多解释： jQuery.data()

<强>更新

而不是使用a（锚）标签而是使用类似.changeIMG的className：

<span class='changeIMG' postfix='-bw'>Change to black and white</span>

并且使用css它看起来像锚标记：

span.changeIMG {
   cursor: pointer;
   color: blue;
   text-decoration: underline;
}

然后上面的代码中有2个更改：

$('a').click(function(e){成为$('span.changeIMG').click(function(e){
并var preFix = $(this).attr("href");成为var preFix = $(this).attr("postfix");

Answer 2

$("img.swap").each(function(){
     var origSrc = $(this).attr("src");
     //original src can now always be accessed
     $(this).attr("origSrc",origSrc);
});

$("a").click(function(e){
    e.preventDefault();
    var prefix = $(this).attr("href");
    $("img.swap").each(function(){
        var origSrc = $(this).attr("origSrc");
        var newSrc = origSrc.replace(".gif",prefix+".gif");
        $(this).attr("src",newSrc);
    });
});

通过多个链接JQuery在页面上交换所有图像

2 个答案: