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

Posted 2023-02-26

【中文标题】在 jQuery 循环中隐藏/显示分页器

【英文标题】：Hide/Show Pager in jQuery Cycle

【发布时间】：2011-08-13 18:01:30

【问题描述】：

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

是否有一个内置在循环中的函数？

如果没有，有谁知道如何在 shopify 中返回该产品可用的产品图片数量，以便我可以添加一个 display none 类（如果它小于 2）。

非常感谢任何帮助。谢谢！

想通了...只有在有图像时才加载循环 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 %

【问题讨论】：

很高兴您自己解决了这个问题。但是为了社区的利益，请将您的解决方案作为答案发布在下面，然后“接受”您自己的答案。

【参考方案1】：

您也可以通过这种方式在 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 将调用一个函数（在本例中为分页）以在您的导航中创建链接。它将忽略第一个索引元素，为第二个创建两个链接以补偿第一个并为其他链接返回正常链接。 希望这对某人有帮助:)

【讨论】：

谢谢西蒙。我会试试看的。

【参考方案2】：

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

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

【参考方案3】：

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