有没有办法让代码更短

Question

我在我的网站上实现了一个 JavaScript 代码，该代码运行以切换幻灯片，并且有 15 张这样的幻灯片，所以对于每张我都实现了幻灯片切换代码，但我想知道有没有更短的方法让我一次编写代码并在所有幻灯片上实现。

    $(".main1").click(function(){
    $(".show1").slideToggle("slow");
  });
    $(".main2").click(function(){
    $(".show2").slideToggle("slow");
  });
    $(".main3").click(function(){
    $(".show3").slideToggle("slow");
  });
    $(".main4").click(function(){
    $(".show4").slideToggle("slow");
  });
    $(".main5").click(function(){
    $(".show5").slideToggle("slow");
  });
    $(".main6").click(function(){
    $(".show6").slideToggle("slow");
  });
    $(".main7").click(function(){
    $(".show7").slideToggle("slow");
  });
    $(".main8").click(function(){
    $(".show8").slideToggle("slow");
  });
    $(".main9").click(function(){
    $(".show9").slideToggle("slow");
  });
    $(".main10").click(function(){
    $(".show10").slideToggle("slow");
});
    $(".main11").click(function(){
    $(".show11").slideToggle("slow");
  });
    $(".main12").click(function(){
    $(".show12").slideToggle("slow");
  });
    $(".main13").click(function(){
    $(".show13").slideToggle("slow");
  });
    $(".main14").click(function(){
    $(".show14").slideToggle("slow");
  });
    $(".main15").click(function(){
    $(".show15").slideToggle("slow");
  });

Answer 1

也许尝试使用 for 循环：

for (let i=1; i<16; i++){
    $((".main"+i.toString())).click(function(){
        $((".show"+i.toString())).slideToggle("slow");
     });
}

Answer 2

我相信这对你有用。

for (let i = 1; i <= 15; i++) {
  $(".main" + i).click(function(){
    $(".show" + i).slideToggle("slow");
  });
}

Answer 3

在每个元素上放置相同的 class，然后使用 data 属性来定位您想要 slideToggle() 的不同实例。使用此方法，相同的三行 JS 将适用于 HTML.

中无限数量的相关元素

$(".main").click(function() {
  $(this.dataset.target).slideToggle("slow");
});

.show { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="main" data-target="#show-1">Show 1</a>
<a href="#" class="main" data-target="#show-2">Show 2</a>
<a href="#" class="main" data-target="#show-3">Show 3</a>

<div class="show" id="show-1">Lorem ipsum</div>
<div class="show" id="show-2">Dolor sit</div>
<div class="show" id="show-3">Amet consectetur</div>

Answer 4

如果您的 HTML 标记的 class 属性包含单个 class，或者如果您的 class 属性以 main 开头，那么您可以使用此 CSS select 或 jQuery:

$('[class^="main"]').click(function() {
    const target = $(this).attr('class').replace('main', 'show');

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

[class^="main"] 基本上指出：select 所有具有 class 属性的元素都以 main 开头，并为所有这些元素注册事件处理程序。

然后，当点击发生时，我们会将字符串 main 替换为 show，从而保留您的枚举，即点击 main17

main17: show17

回调 slideToggle 将在 show17 元素上调用。

此外，我会推荐，因为虽然我的解决方案对您来说看起来很优雅，但它可能存在性能和功能问题。

参考：

Attribute Starts With Selector [name^=”value”] - jQuery API

Answer 5

如此处其他答案所述，最好的方法是使用 main 和 show 类而不是 main1、main2、main3等

如果由于某种原因您无法改进 html 结构，您可以使用 jquery 和 regex 来定位元素：

$("[class^=main]").click(function(Event) {
    var id = this.className.match(/main(\d+)/)[1];
    $(".show" + id).slideToggle("slow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="main1">Toggle 1</button>
<p class="show1">
  This is the paragraph 1 to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>

<button class="main2">Toggle 2</button>
<p class="show2">
  This is the paragraph 2 to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>

Answer 6

遍历DOM解

使用this关键字和traverse the DOM

which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements

就是这样。

例如：如果内容是按钮的下一个兄弟元素，请使用next()（2 行代码）。

$('button.slider_trigger').click(function() {
  $(this).next().slideToggle("slow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="slider_trigger">Toggle 1</button>
  <p class="content">
    This is the paragraph 1 to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</div>

<div>
  <button class="slider_trigger">Toggle 2</button>
  <p class="content">
    This is the paragraph 1 to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</div>

有没有办法让代码更短

Is there any way to make the code shorter

html

javascript

jquery

jquery-events

遍历DOM解