时间戳

首页 > 解决方案 > 如何在单击时交替 jquery 切换滑动动作

javascript - 如何在单击时交替 jquery 切换滑动动作

问题描述

我想在单击时显示两个元素，一个接一个，其中用户单击一个按钮，.show-element-one显示具有类（）的第一个元素，当用户第二次单击同一个按钮时，第二个元素显示为类( .show-element-two) ，我使用下面的代码在单击时显示第一个元素，但我坚持在第二次单击时显示第二个元素。

jQuery(document).ready(function() {
  jQuery('#display-elements').click(function() {
    jQuery('.show-element-one,.show-element-two').toggle("slide");
  });
});

我将不胜感激任何指南，谢谢。

标签： javascriptjquery

解决方案

您可以设置一个计数器变量计算模值，以循环方式显示这两个类的元素。类似于下面的代码：

jQuery(document).ready(function() {
  var count = 1;
  jQuery('#display-elements').click(function() {
    jQuery('.show-element-one, .show-element-two').hide();
    if (count % 2 !== 0) {
      jQuery('.show-element-one').toggle("slide");
    } else {
      jQuery('.show-element-two').toggle("slide");
    }
    count++;
  });
});
.show-element-one,
.show-element-two {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
  show-element-one
</div>
<div class="show-element-two">show-element-two </div>

推荐阅读