javascript - Javascript变量，增量函数？

Question

我对以下 JavaScript 代码有疑问：

$( "#toggleLog-1" ).click(function() {
  $( "#toggled-1" ).slideToggle( "slow" );
});
$( "#toggleLog-2" ).click(function() {
  $( "#toggled-2" ).slideToggle( "slow" );
});
$( "#toggleLog-3" ).click(function() {
  $( "#toggled-3" ).slideToggle( "slow" );
});
/// ... and many other IDs

如您所见，我想知道如何增加 id 并压缩我的代码，因为我的 css 文件中有很多 ID。在 php 中，我知道我会如何做到这一点（使用 foreach 和 increment 函数），但是如何在 JavaScript 中做到这一点？

Answer 1

尽管所有可点击元素的属性似乎都符合特定约定，但为所有可点击元素提供特定类和指定要切换的元素的选择器id的属性会更容易和更清晰。data-*例如，有这样的结构：

<div class="toggler" data-toggler="#toggled-2"></div>
<div id="toggled-2"></div>

并使用这个：

$(".toggler").on("click", function () {
    var $this = $(this),
        toggler = $this.attr("data-toggler");

    $(toggler).slideToggle("slow");
});

它以类的所有可点击元素为目标toggler。在单击处理程序中，它查看其特定data-toggler属性，并通过该属性选择元素，调用.slideToggle()任何找到的元素。

Answer 2

嗯，怎么样：

$("[id^=toggleLog]").click(function() {
    var idNum = this.id.split("-")[1];
    $("#toggled-" + idNum).slideToggle("slow");
});