Question

我想弄清楚如何使用slideToggle循环.click函数。这是单个事件的代码：

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

slide1是用户点击切换面板向下或向上滑动的div。我已经尝试过for循环等来弄清楚如何为多个幻灯片和面板循环它。

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

Answer 1

这样做的整洁方式：

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

像这样构建你的幻灯片。然后你需要一个处理程序：

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

Answer 2

您可以以更动态的方式制作它：

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

我希望有所帮助，祝你好运

Answer 3

您需要的是delegate。这将处理任何孩子的任何事件。第一个参数是要为其监听的子项的过滤器。在这种情况下，您只想捕获.slide的事件。第二个参数指定要监听的事件类型，这里需要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上的所有点击事件。

在Javascript中循环.click函数

3 个答案: