Question

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

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

谢谢您的指导。

Answer 1

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

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>

Answer 2

也许您缺少.slide CSS类的定义。尝试下面的代码。

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

.slide {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="show-element-one">show-element-one</div>
<div class="show-element-two slide">show-element-two</div>

<button id="display-elements">Toggle</button>

如何在单击时交替显示jQuery切换幻灯片动作

2 个答案: