Question

点击时，我发现缩略图打开较大的图像时遇到问题。它似乎只适用于第一个缩略图，但我无法弄清楚原因。

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

<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>

任何帮助？

Answer 1

您正在.hide()上致电<ul>。这将隐藏整个结构;随后使嵌套的<li>组件可见将不会产生任何影响，因为父项是隐藏的。

而不是隐藏所有<li>元素：

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

这将隐藏所有<li>个孩子（大概）你的大图像所在的位置。然后，您的下一行代码将显示您要显示的代码（与所单击的缩略图对应的代码）。

Answer 2

假设这是整个代码，那么脚本的最后一行会出错：

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

  [snip]

});

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

});

});不属于任何东西。在这种情况下，如果您检查浏览器的javascript控制台，则很可能会在该行上看到错误。

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

2 个答案: