Javascript 变量，增量函数

Javascript variable, increment function?

本文关键字：函数 变量 Javascript      更新时间：2023-09-26

我对以下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 和增量函数），但是我如何在 JavaScript 中做到这一点？

嗯

，怎么样：

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

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

相关文章：