Question

我有以下JS代码：

$(document).ready(function(){
 for(var i=1; i <= 6; ++i){
    $('.etalage'+(i===1 ? '':i)).etalage({
        show_hint: false,
        thumb_image_width: 464,
        thumb_image_height: 464,
        source_image_width: 1000,
        source_image_height: 1000,
        zoom_element: '#custom_zoom_element'+(i===1 ? '':i),
        //source_image_height: 480,
        //source_image_width: 480,
        zoom_area_width: 400,
        zoom_area_height: 400
    });
 }
});

当我将鼠标悬停在缩略图上时会放大到单独的大图像。它适用于前5个图像，但在此之后，两个图像都不会出现。这是html的6个基本相同的分组之一：

<div>
<ul class="etalage">    
        <li>
            <img class="etalage_thumb_image" src="codecanyon/demo_files/images/image2_thumb.jpg">
            <img class="etalage_source_image" src="codecanyon/demo_files/images/image2_large.jpg">
        </li>  
</ul>

<ul class="etalage2">   
        <li>
            <img class="etalage_thumb_image" src="codecanyon/demo_files/images/image4_thumb.jpg">
            <img class="etalage_source_image" src="codecanyon/demo_files/images/image4_large.jpg">
        </li>  
</ul>

另一个有趣的事情是，在第6页，第7页等页面上，每个页面上都会显示list-style-type的项目符号。任何想法我正在犯的错误。再次感谢。

Answer 1

您已在代码中将其设置为在6次循环后停止：

  for(var i=1; i <= 6; ++i){

也许您需要将i <= 6设置为var并将此var计数为.etalage的数量。

修改

所以也许：

var numberOfetalage = $('.etalage li').length for(var i=1; i <= numberOfetalage ; ++i){

Answer 2

您的问题出在for循环中。更改以下行：

for (var i=1; i <= 6; ++i)

将6（i <= 6;）更改为您拥有的列表元素数量。

e.g。我想要8个元素，因此我的代码是：

for (var i=1; i <= 8; i++)

完美地工作直到第6页，并且子弹开始出现而不是图像...为什么？

2 个答案: