jquery - 在 jQuery 循环中隐藏/显示分页器

Question

我在 shopify 中使用循环来制作产品幻灯片。它很好用，但如果只有一张产品图片可用，我想隐藏寻呼机。

循环中是否有为此内置的功能？

如果没有，有谁知道如何在 shopify 中返回该产品有多少可用的产品图像，所以如果它小于 2，我可以添加一个 display none 类。

任何帮助深表感谢。谢谢！

想通了...只有在有图像时才加载周期2。

{% if product.images[2] != undefined %}
    <script type="text/javascript">
        $('#prodImages').before('<div id="prodnav">').cycle({ 
            fx:     'fade', 
            speed:  1500, 
            timeout: 5000, 
            pager: '#prodnav'
});
    </script>
{% endif %}

Answer 1

我尝试了 Simon Arnolds 解决方案，但 jQuery Cycle 甚至将点击绑定到将第二张幻灯片显示到第一个和第二个链接。这是我最终确定的解决方案：

$( '#prodnav a:only-child' ).hide();

Answer 2

您也可以通过这种方式在 javascript 中执行此操作：

$(function() {
    $('#prodImages').before('<div id="prodnav">').cycle({
        fx: 'fade', 
        speed: 1500, 
        timeout: 5000, 
        pager: '#prodnav',
        pagerAnchorBuilder: paginate
    });
});
function paginate(ind, el) {
    if (ind == 1) { 
        return '<a href="#" class="activeSlide">1</a><a href="#">2</a>' 
    }
    else if (ind > 1) { 
        return '<a href="#">' + parseInt(ind)+1 + '</a>' 
    }
}

添加pagerAnchorBuilder将调用一个函数（在本例中为分页）以在导航中创建链接。它将忽略第一个索引元素，为第二个创建两个链接以补偿第一个并为其他链接返回正常链接。希望这对某人有帮助:)

Answer 3

if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}