有什么办法可以缩短代码

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>

Answer 4

也许尝试使用 for 循环：

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

Answer 5

如果您的 HTML 标记的class属性包含单个类，或者您的class属性以main开头，那么您可以在 jQuery 中使用此 CSS 选择器：

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

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

[class^="main"]基本上说明：选择所有class属性以main开头的元素，并为所有元素注册事件处理程序。

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

main17: show17

并且回调slideToggle将在show17元素上被调用。

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

参考：

• 属性以选择器 [name^=”value”] 开头 - jQuery API

Answer 6

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

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

 $("[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>