循环.单击Javascript中的Function

Loop .click Function in Javascript

本文关键字：Function 中的 Javascript 单击 循环      更新时间：2023-09-26

我想知道如何用slideToggle循环一个.click函数。以下是单个事件的代码：

$("#slide1").click(function () {
  $("#panel1").slideToggle(1000);
});

slide1是用户点击面板以向下或向上滑动的div。我已经尝试了for循环等，以找出如何为多个幻灯片和面板循环。

假设我有10张幻灯片，是否可以为所有10张幻灯片创建一个循环，或者必须单独完成？

做到这一点的整洁方法：

<div class="slide" data-panel="panel1">...</div>
<div id="panel1">...</div>

这样制作幻灯片。然后你只需要一个处理程序：

$(".slide").click(function() {
    $("#"+this.getAttribute("data-panel")).slideToggle(1000);
});

您需要的是delegate。这将为任何孩子处理任何事件。第一个参数是要侦听其子级的筛选器。在这种情况下，您只想捕获.slides的事件。第二个参数指定要侦听的事件类型，在这里您需要click，因为您只需要单击事件。最后一个参数是处理程序。在这个处理程序函数中，this指的是已经被点击的元素

$('#container').delegate('.slide', 'click', function(event) {
  $($(this).data('toggle')).slideToggle(1000);
});
.slide {
  width: 100px;
  height: 40px;
  background-color: #AAA;
  margin: 4px;
  padding: 4px;
}
.panel {
  width: 200px;
  height: 80px;
  background-color: #44A;
  margin: 8px;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="slide" data-toggle="#panel1">Toggle panel 1</div>
  <div class="slide" data-toggle="#panel2">Toggle panel 2</div>
  <div class="slide" data-toggle="#panel3">Toggle panel 3</div>
  <div class="panel" id="panel1">Panel 1</div>
  <div class="panel" id="panel2">Panel 2</div>
  <div class="panel" id="panel3">Panel 3</div>
</div>

您可以添加任意数量的幻灯片和面板（也可以动态添加），delegate将处理.slide上的任何单击事件。

你可以用一种更动态的方式：

$(".slide").click(function() {
  $("#"+$(this).attr("data-panel")).slideToggle(1000);
});

我希望这会有所帮助，祝好运

相关文章：