jQuery onClick代码仅为第一个元素触发

单击时，我发现很难让缩略图打开较大的图像。它似乎只适用于第一个缩略图，但我不明白为什么

以下是我正在使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

<script type="text/javascript">    
$('#main ul:first-child').show();

$('#thumb li').click(function(){
    var navItem = $(this).index();
    $('#main ul').hide();
    $('#main ul:nth-child('+(navItem+1)+')').show();
    return false;
});

$('#main ul a').colorbox();

});
</script>

$（“#主ul:第一个孩子”）.show（）；
$（'#thumb li'）。单击（函数（）{
var navItem=$（this.index（）；
$（'#main ul'）.hide（）；
$（“#main ul:n子项（+（navItem+1）+”）.show（）；
返回false；
});
$（“#主ul a”）.colorbox（）；
});

有什么帮助吗

您正在调用

上的

.hide（）

。这将隐藏整个结构；随后使嵌套的

组件可见将不会产生任何效果，因为父组件是隐藏的

相反，隐藏所有

元素：

  $('#main ul li').hide();

这将隐藏（大概）大图像所在的所有

子对象。然后，您的下一行代码将显示您要显示的代码（与单击的缩略图对应的代码）。

您正在调用

上的
.hide（）
。这将隐藏整个结构；随后使嵌套的
组件可见将不会产生任何效果，因为父组件是隐藏的

相反，隐藏所有
元素：

  $('#main ul li').hide();

这将隐藏（大概）大图像所在的所有
子对象。然后，您的下一行代码将显示您要显示的代码（与单击的缩略图相对应的代码）。
假设这是整个代码，则脚本的最后一行出现错误：

$('#thumb li').click(function(){

  [snip]

});

$('#main ul a').colorbox();

});

}）不属于任何东西。在这种情况下，如果您检查浏览器的javascript控制台，您很可能会在该行中看到错误。
假设这是全部代码，则脚本的最后一行有错误：

$('#thumb li').click(function(){

  [snip]

});

$('#main ul a').colorbox();

});

}）不属于任何东西。在这种情况下，如果您检查浏览器的javascript控制台，您很可能会在那一行看到错误。
您可以发布一个重现问题的演示吗？您可以发布一个重现问题的演示吗？请保持这样？$（“#主ul:第一个孩子”）.show（）；$（'#thumb li'）。单击（function（）{var navItem=$（this）.index（）；$（'#main ul li'）。hide（）；返回false；这只是隐藏了所有内容…不，不，您仍然需要对已选择的对象调用
。show（）
。$（'#main ul first child'）。show（）；$（'#thumb li'）。单击（function（）{var navItem=$（此）.index（）；$（“#main ul li”）.hide（）；$（“#main ul:nth child”（“+（navItem+1）+”）.show（）；return false；}）；它仍在隐藏所有内容…这行内容都可以吗？$（“#main ul:nth child”（“+（navItem+1）+”）。show（）@adennis是的，我认为它看起来可以；只要你的缩略图
和“全尺寸”
元素已正确配对，我认为它应该可以工作。（对“+1”部分不是100%确定，但应该很容易判断：-）您应该使用调试器或其他工具来确保对
.index（）
的调用返回您认为应该返回的内容。所以请保持这样？$（'main ul:first child'）.show（）$（“#thumb li”）。单击（function（）{var navItem=$（this）.index（）；$（“#main ul li”）。hide（）；返回false；这只是隐藏了所有内容…不，不，您仍然需要在已选择的对象上调用
。show（）
。$（“#main ul first child'）。show（）；$（“#thumb li'）。单击（function（）{var navItem=$（this）.index（））$（'main ul li'）.hide（）；$（'main ul:nth child（+（navItem+1）+'）.show（）；return false；}）；它仍在隐藏一切…这行的一切都好吗？$（'main ul:nth child（+（navItem+1）+'）.show（）@adennis是的，我认为它看起来不错；只要你的缩略图
和“全尺寸”
元素已正确配对，我认为应该可以工作。（对“+1”部分不是100%确定，但应该很容易判断：-）您应该使用调试器或其他工具来确保对
.index（）
的调用返回您认为应该返回的内容。