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

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()

UPDATE

而不是使用 a (锚）标记使用其他带有类名的东西，如 .changeIMG：

<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);
    });
});