3

有谁知道简化我丰富的点击功能的方法？

这是我的例子：

$("#info01_v1_btn").click(function(){
    $("#info01_v1").slideToggle("fast");
    $("#info01_v1_btn a").toggleClass("open");
    return false;
});

$("#info02_v1_btn").click(function(){
    $("#info02_v1").slideToggle("fast");
    $("#info02_v1_btn a").toggleClass("open");
    return false;
});

$("#info03_v1_btn").click(function(){
    $("#info03_v1").slideToggle("fast");
    $("#info03_v1_btn a").toggleClass("open");
    return false;
});

$("#info04_v1_btn").click(function(){
    $("#info04_v1").slideToggle("fast");
    $("#info04_v1_btn a").toggleClass("open");
    return false;
});

$("#info05_v1_btn").click(function(){
    $("#info05_v1").slideToggle("fast");
    $("#info05_v1_btn a").toggleClass("open");
    return false;
});

如果这些函数没有在同一页面上一起被调用，我可能只使用一个类而不是一个 id，但我正在使用一个包含多个地址信息的模块，所以不知道该怎么做。为了记录，这行得通，只是看起来真的很乱。不确定添加循环是否有助于清理它。

注意*：我是一名网页设计师，自学 jquery'ier，因此正在寻找任何好的技术来使此代码更小，任何可能在其他地方重用。

谢谢

4

2 回答 2

3

将事件绑定到所有以 结尾的元素_v1_btn，并使用 ID 定位下一个元素，并使用this关键字查找<a>您需要定位的元素：

$('[id$="_v1_btn"]').on('click', function(){
    var ID = this.id.replace('_btn', '');
    $("#"+ID).slideToggle("fast");
    $('a', this).toggleClass("open");
    return false;
});
于 2012-08-20T19:26:11.093 回答
1 
$(".YourClassName").click(function(){
    var t = $(this).attr('id').replace('_btn','');
    $( '#' + t ).slideToggle("fast");    
    $(this).find('a').toggleClass("open");
    return false;
});
于 2012-08-20T19:33:59.063 回答