可笑的简单jQuery可重用函数问题

时间:2009-07-10 13:37:08

标签: jquery function

真的很快jQuery问题......

我有这个功能:

$(document).ready(function() {

  $('a#show1').click(function() {
    $('.item1').toggle(1000);
    return false;
  });

  $('a#show2').click(function() {
    $('.item2').toggle(1000);
    return false;
  });

  // And it goes on...
});

脚本运行的页面包含任意数量的showitem div,均为唯一且标识为itemX

如何重写show1show2的重复和相同的功能,以便它最终基本上像这样:

$('a#showX').click(function() {
    $('.itemX').toggle(1000);
    return false;
});

6 个答案:

答案 0 :(得分:2)

$("a[id^=show]").click(function(){
 var id = $(this).attr("id");
 var num = id.substring(4);
 $(".item" + num).toggle(1000);
});

我希望它有效,我没有测试它。

答案 1 :(得分:1)

我通常会尝试将项目保持在DOM中的一致相对位置:

//all <a> with class .show-extra
$('a.show-extra').click(function() {
  //get the next element with the class .show-extra-panel
  $(this).next('.show-extra-panel').toggle(1000);
  return false;
});

这会使这样的工作:

<a href="#" class="format-link show-extra">text</a>
<div class="info-panel show-extra-panel">extra toggle text</div>

答案 2 :(得分:1)

@usoban有正确的方法 - 第一个选择器中的'开头'语法将找到所有'show'项目,无论有多少。你只需要调整代码,使它只提取'id'的数字部分,而不是使用它的全部,或者它将寻找具有'.itemshow1'类而不是'.item1'的元素

$("a[id^=show]").click(function(){
    $(".item" + this.attr("id").substr(4)).toggle(1000);
});

编辑 @Keith也有一个很好的方法 - 使用类来标记'show'元素 - 这样就不需要标识符的数字部分 - 然后依赖于相对位置找到它的“项目”。

答案 3 :(得分:0)

如果您知道自己有多少,可以使用for循环并附加变量。


for(var i=1;i<=whatever;i++)
{
     $('a#show' + i).click(function() { // ... etc ... // });
}

答案 4 :(得分:0)

这是一个想法:

$('a#show1', 'a#show2').click(function() {
    id = ".item" +  this.id.substr(4);
    $(id).toggle(1000);
    return false;
});

答案 5 :(得分:0)

$('a[id^=show]').click(function() {
    var id = $(this).attr('id');
    id = id.substring(id.length-1);
    $('.item'+id).toggle(1000);
    return false;
});