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

【问题标题】：Swap all images on page via multiple links JQuery通过多个链接JQuery交换页面上的所有图像
【发布时间】：2011-03-18 14:23:37
【问题描述】：

好的，到目前为止，我有这个，它在一定程度上有效，

$('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) 如果同一个链接被点击两次，我需要它首先添加前缀然后删除前缀。

非常感谢

【问题讨论】：

几乎得到了一些东西你的第一个前缀是如何形成的？或者是你可以设置的东西。
它只是从banner.jpg开始，然后当我点击链接时，它会将HREF的内容发送到图像的末尾，所以banner-bw.jpg。
我在下面修复了我的代码以反映您真正需要的内容。我认为：-D

标签： jquery image swap

【解决方案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：

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

【讨论】：

不，不幸的是这不起作用，它使链接成为点击，但我会看看 jQuery.data() 谢谢。
当我点击链接时，它只是将我发送到页面而不是在图像中添加前缀，我只是更改了所有前缀使其匹配但现在仍然幸运
@John White 添加返回 false；就在您的点击事件结束之前。
e.preventDefault(); 应该防止这种情况。我会做一个小提琴来展示它的工作原理
@maniator 我有此代码将前缀添加到 SRC，但它正在删除图像的开头。例如。 banner.jpg 只是变成 _bw.jpg 而不是 banner_bw.jpg。

【解决方案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);
    });
});

【讨论】：