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关键字和traverse the 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开头，则可以将此CSS选择器与jQuery一起使用：

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

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

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

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

main17: show17

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

此外，我建议使用solution suggested by Rory McCrossan，因为我的解决方案对您来说看起来很优雅，它可能会出现性能和功能方面的问题。

参考：

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

Answer 6

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

有什么办法可以使代码更短

6 个答案:

遍历DOM解决方案