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^=toggleLog]").click(function() {
    var idNum = this.id.split("-")[1];
    $("#toggled-" + idNum).slideToggle("slow");
});

Answer 2

尽管所有可点击元素似乎都符合具有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()。

Javascript变量，增量函数？

2 个答案: