jQ图像选择器的问题

我在这里遇到了类似的问题：我解决了特定类的jQuery函数 。 但是它让我感到烦恼，因为它有太多的div并且看起来不太好，所以我重写了我的HTML代码并重写了选择器脚本。 现在脚本加载图像很好（它将它们全部淡入）但选择根本不起作用。 我尝试使用最近和兄弟姐妹的function，但无济于事。

我怎么解决这个问题？ 您可以在以下url找到相关页面： http ： //baldino.rs/baby-program/

提前完成

$(document).ready(function(){ var picture = $('.post-cipela').each(function(index, element) { $(this).find('.cipela-bg img:eq(0)').fadeIn(500); $('.colorwrap a').click(function(){ var index = $(this).find(".colorwrap a").index(this); $('.cipela-bg img').fadeOut(200); $('.cipela-bg img:eq('+index+')').fadeIn(500); }); }); 

编辑-1：我修改了我的脚本。 现在我遇到了问题，因为我的图像会多次消失。 我该如何解决？ – 这是修改后的脚本，您可以在这里看到问题的页面： http ： //baldino.rs/baby-program

 $(document).ready ( function() { $(".cipela-1").fadeIn(200); $(".colorwrap a").click ( function() { var item = $(this); var a = item.attr("rel"); item.closest(".post-cipela").find(".cipela-1, .cipela-2, .cipela-3, .cipela- 4").fadeOut(200); item.closest(".post-cipela").find("."+a).first().fadeIn(200); } ); } ); 

Answer 1

你粘贴的代码是恶意的，你有额外的}); 在末尾。

另外，你在.each函数循环中包装$（’。colorwrap a’）选择器，我不确定你的意思。

此外，您已经错过了对此变量的范围。

你们each这条线都没问题。

 $(this).find('.cipela-bg img:eq(0)').fadeIn(500); 

但是然后你实例化一个点击处理程序

 $('.colorwrap a').click(function(){ var index = $(this).find(".colorwrap a").index(this); 

该处理程序中的$（this）指的a .colorwrap匹配的a 。 然后你正在找到另一个.colorwrap a实例，它可能不存在，因此你的选择器找不到任何东西。

如果您确实打算在每个.each迭代中包装此单击处理程序，则应将$(this)分配给循环中的变量，并在单击处理程序中使用它，如下所示

 var picture = $('.post-cipela').each(function(index, element) { var that =$(this); that.find('.cipela-bg img:eq(0)').fadeIn(500); $('.colorwrap a').click(function(){ var index = that.find(".colorwrap a").index(this); $('.cipela-bg img').fadeOut(200); $('.cipela-bg img:eq('+index+')').fadeIn(500); }); });