交换通过多个链接网页上的所有图片JQuery的

好吧，我有这个迄今为止，它工作在一定程度上，交换通过多个链接网页上的所有图片JQuery的

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

非常感谢

来源

2011-03-18 John White

几乎有东西给你的第一个前缀是如何格式化？或者是你可以设置init的东西。 – 2011-03-18 14:36:45

它开始只是banner.jpg，然后当我点击链接时，它会将HREF的内容发送到图像的末尾，以便banner-bw.jpg。 – 2011-03-18 14:42:25

我在下面修复了我的代码，以反映您真正需要的内容。我认为：-D – Neal 2011-03-18 15:11:31

试试这个：:-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元素，不是做之后，你可以做布尔运算CHACK它反对你的价值:-)

更说明这里： jQuery.data()

UPDATE

和而不是使用一个（锚）标签使用一个类名像.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");

来源

2011-03-18 14:31:03 Neal

不幸的是，这不工作，它使一个链接点击，但我会看看jQuery.data（）谢谢你。 – 2011-03-18 14:36:01

什么没有工作呢？ – Neal 2011-03-18 14:36:29

当我点击链接，它只是发送给我的页面，而不是添加前缀的形象，我只是改变了所有前缀，所以它匹配，但现在仍然运气 – 2011-03-18 14:39:12

$("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); 
    }); 
});

来源

2011-03-18 14:36:17

交换通过多个链接网页上的所有图片JQuery的

回答

相关问题