Question

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

我该如何解决这个问题？您可以在以下位置找到相关页面： 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);
    });
});

EDIT-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功能循环中包装$（＆＃39; .colorwrap a＆＃39;）选择器，我不确定您的意思。

此外，您在确定此变量的范围时错过了一些。

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。然后你在其下面找到另一个.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);
    });
});

jQ图像选择器的问题

1 个答案: