当画廊只有一个图像时，jQuery 隐藏下一个和上一个按钮不起作用

Posted 2023-03-13

【中文标题】当画廊只有一个图像时，jQuery 隐藏下一个和上一个按钮不起作用

【英文标题】：jQuery to hide next & previous buttons not working when the gallery has only one image

【发布时间】：2018-06-19 17:11:00

【问题描述】：

我有一个来自 Flickity 的轮播，我试图隐藏左右箭头和分页。

CodePen

JQuery 代码

$('.carousel').each(function() 
if ($(this).find('div.carousel-cell').length === 1) 
$(this).find('button.flickity-prev-next-button previous, button.flickity-prev-next-button next, button.flickity-page-dots').hide();
);

轮播代码

<div class="carousel mt-1x mb-1x flickity-enabled" data-navdots="true" data-auto="false" data-buttons="true" data-wrap="true" data-adaptive tabindex="0">

<div class="flickity-viewport" style="height: 385.188px; touch-action: pan-y;">
    <div class="flickity-slider" style="left: 0px; transform: translateX(0%);">
        <div class="carousel-item is-selected" aria-selected="true" style="position: absolute; left: 0%;">
            <img src="/img/asset/bWFpbi9oZWFsdGhjYXJlL1BSSU1BUlkvQlVSR09QQUstQkxJU1RFUi1QUklNQVJZLTEuanBn?w=2880&amp;h=1600&amp;s=c58a408a48a295ed53498fd03655878f"  title="" class="mb-1x">

        </div>
    </div>
</div>
<button class="flickity-button flickity-prev-next-button previous" type="button" disabled="" aria-label="Previous">
    <svg class="flickity-button-icon" viewBox="0 0 100 100">
        <path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path>
    </svg>
</button>
<button class="flickity-button flickity-prev-next-button next" type="button" disabled="" aria-label="Next">
    <svg class="flickity-button-icon" viewBox="0 0 100 100">
        <path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path>
    </svg>
</button>
<ol class="flickity-page-dots">
    <li class="dot is-selected" aria-label="Page dot 1" aria-current="step"></li>
</ol>

【问题讨论】：

能给个codepen吗？

有什么理由不使用滑块选项prevNextButtons: false 禁用按钮？他们有一个codepen of this example here。

@SupunPraneeth 代码笔有问题

@crazymatt - 因为这会关闭所有画廊的箭头。我的网站上有很多，而且只有一个画廊只有一张图片，所以我宁愿将它们从中删除。

【参考方案1】：

我认为这是因为您在 flickity 创建所有必要元素之前运行代码。因此，如果您将代码覆盖到函数中并稍后通过 setTimeout 调用它，那么一切正常。但首先你需要更正选择器。正确的选择器看起来像 button.flickity-prev-next-button.previous, button.flickity-prev-next-button.next, ol.flickity-page-dots 而不是你的 `button.flickity-prev-next-button previous, button.flickity-prev-next-button next, button.flickity-page-dots'。最后它可能看起来像

function x() 
 $('.carousel').each(function() 
   if ($(this).find('div.carousel-cell').length === 1) 
      $(this).find('button.flickity-prev-next-button.previous, button.flickity-prev-next-button.next, ol.flickity-page-dots').hide();
   
 );
;
setTimeout(x,1000);

【讨论】：

我创建了 CodePen - codepen.io/anon/pen/mKgamv 在我这边一切正常

好的，我发现该站点实际上使用 div.carousel-item 而不是 div.carousel-cell。但我仍然无法让它工作。如何使用开发工具在浏览器中测试 JS？

当我用问题中的实际代码替换 CodePen 中的代码时，它不起作用。所以我不能把它作为一个答案。

我为 codePen 提供了 working 解决方案。顺便说一句，问题标题中的 codePen 没有插入 jQuery。

清除缓存并将代码移动到正确的js文件中，它可以工作。感谢您的耐心等待！