单击按钮时，每个循环应该只运行一次

Question

我想在单击按钮时隐藏一个 div，然后显示具有相同 class 的下一个 div。 我试过使用这段代码，但是当我这样做时，我想要显示的下一个 div 也会淡出。

 $('.arrow:last-of-type').on('click', function(){
        
        $( ".collaboration" ).each(function( index ) {
            
            if($('.collaboration').css('display') == 'block'){
                $(this).fadeOut()
                $(this).next().fadeIn()
  
            }

        })
    })

有没有办法阻止 each() 在执行一次时停止运行，然后在单击操作发生时再次运行？

这是 HTML：

<div id="collaborations">
      <p class="arrow"><</p>
        <div class="collaboration">
            <img src="./img/test.png" />
            <p>Text</p>
            <a href="#" target="_blank"><button>Visit</button></a>
        </div>
        
        <div class="collaboration">
            <img src="./img/test.png" />
            <p>Text</p>
            <a href="#" target="_blank"><button>Visit</button></a>
        </div>

        <div class="collaboration">
             <img src="./img/test.png" />
             <p>Text</p>
             <a href="#" target="_blank"><button>Visit</button></a>
        </div>

        <p class="arrow">></p>
      </div>
    </div>  

谢谢

Answer 1

解决方案

你可以通过不遍历.collaboration来解决这个问题。

关键是您需要跟踪当前显示的是哪一个。 如果您知道这一点，那么您的点击处理程序可以做的是显示下一个并隐藏当前的。

我建议在与 .collaboration 相同的 div 上使用.collaboration .active 然后，您可以通过$('.active').next().addClass('.active') select 下一个 div，并通过$('.active').removeClass('.active') ('.active').removeClass('.active') 取消选择。

您可能需要在 select 下一个元素之前存储对第一个元素的引用

例子

这是一个如何工作的简单示例： https://codepen.io/juancaicedo/pen/LYGgPWa

我在 html 周围移动，将所有协作单独分组到一个 div 中。

其他方法

您会发现您必须通过上述解决方案考虑其他一些行为。 例如，在我的示例中，有两个项目出现在屏幕上的时刻，导致它们的容器 div 增长并随后缩小。

由于这些原因，我不喜欢在 javascript 中处理演示文稿（即使用 jquery 的fadeIn / fadeOut ）。

如果您能找到一种仅使用 css 的方法，我认为这是更可取的。 这是一个使用 css 转换的示例https://codepen.io/juancaicedo/pen/ZEQqzrR

Answer 2

jQuery的each方法可以随时通过在回调中返回 false 来停止，因此您可以通过执行以下操作来修复您的代码：

$('.arrow:last-of-type').on('click', function(){

    $( ".collaboration" ).each(function( index ) {

        if($('.collaboration').css('display') == 'block'){
          $(this).fadeOut()
          $(this).next().fadeIn()
          return false;
        }

    });
});