Более простой способ кодирования этого

Question

На этой странице: моего веб-сайта

У меня есть этот jQuery, но он кажется немного длинным.

<script type="text/javascript">
$(document).ready(function(){
$("p").hide();
$("#lastfmrecords").hide();
$("h2.btn1 a").click(function(){
$("ol.btn1>*").toggle(400);
});
$("h2.btn2 a").click(function(){
$("ol.btn2>*").toggle(400);
});
$("h2.btn3 a").click(function(){
$("ol.btn3>*").toggle(400);
});
$("h2.btn4 a").click(function(){
$("ol.btn4>*").toggle(400);
});
$("h2.btn5 a").click(function(){
$("ol.btn5>*").toggle(400);
});
  $("h2.btn6 a").click(function(){
$("ol.btn6>*").toggle(400);
});
  $("h2.btn7 a").click(function(){
$("ol.btn7>*").toggle(400);
});
});
</script>

<h2 class="btn5"><a href="#">FAVOURITE Books</a></h2>
    <ol class="btn5">
      <p>Freakonomics, Bad Science, A Brief History of Nearly Everything, 100 years of Solitude, On Chesil Beach</p>
    </ol>

Тогда у меня есть 7 упорядоченных списковс этими именами нет.5 выше (btn1 - btn7), которые переключаются, когда я нажимаю на заголовок H2, который соответствует.Все отлично работает, но есть ли способ сжатия JQuery?

Answer 1

Петля for кажется очевидным решением.

$(document).ready(function() {
  $('ol').hide();
  for (var i = 1; i <= 7; ++i) {
    $('h2.btn' + i + ' a').click(function() {
      $('ol.btn' + i + ' > *').toggle(400);
    });
  }
});

Answer 2

Например, вы можете обернуть h2 в div и получить свой <a> rel в классе ol, который вы хотите переключить

<div class="wrapper">
   <h2><a rel="btn1"> </a><ol class="btn1">...</ol>
   ...
   <h2><a rel="btn7"> </a><ol class="btn7">...</ol>
</div>

затем сделайте это, как показано ниже, обратите внимание, что вы также можете запретить браузеру прокручивать страницу вверх, передав объект event в качестве аргумента функции, и вызовите .preventDefault()

$('.wrapper h2 a').click(function(e) { 
   e.preventDefault(); 
   $('ol.' + $(this).attr('rel') + ' p').toggle(400); 
});

EDIT: Если вы хотите сохранить свой макет как есть, вы также можете сделать что-то вроде:

$('h2[class^=btn] > a').click(function(e) {
   e.preventDefault();
   $('ol.' + $(this).parent().attr('class') + ' > p').toggle(400);
});