有没有办法让代码更短

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 (let i = 1; i <= 15; i++) {

  $(".main" + i).click(function(){

    $(".show" + i).slideToggle("slow");

  });

} 

Answer 2

在每个元素上放置相同的类，然后使用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 3

遍历DOM解决方案

使用this关键字并遍历 DOM

这意味着“通过”，用于根据与其他元素的关系“查找”（或选择）HTML 元素

就是这样。

例如：如果内容是按钮的下一个兄弟元素，请使用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>

如此处其他答案所述，最好的方法是使用mainand showclasses 而不是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>

如此处其他答案所述，最好的方法是使用mainand showclasses 而不是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 4

也许尝试使用 for 循环：

for (let i=1; i<16; i++){

    $((".main"+i.toString())).click(function(){

        $((".show"+i.toString())).slideToggle("slow");

     });

}