有没有办法让代码更短

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++) {&nbsp; $(".main" + i).click(function(){&nbsp; &nbsp; $(".show" + i).slideToggle("slow");&nbsp; });}&nbsp;

Answer 2

在每个元素上放置相同的类，然后使用data属性来定位您想要的不同实例slideToggle()。使用此方法，相同的三行 JS 将适用于 HTML 中无限数量的相关元素。$(".main").click(function() {&nbsp; $(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++){&nbsp; &nbsp; $((".main"+i.toString())).click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $((".show"+i.toString())).slideToggle("slow");&nbsp; &nbsp; &nbsp;});}