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); 
});

修改：如果您希望按原样保留布局，还可以执行以下操作：

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

更简单的编码方式

2 个答案: