Question

有没有人知道如何简化我丰富的点击功能？

以下是我的例子：

$("#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，所以寻找任何好的技术，使这些代码变得更小，任何可能在其他地方重复使用。

由于

Answer 1

将事件绑定到以_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;
});

Answer 2

$(".YourClassName").click(function(){
    var t = $(this).attr('id').replace('_btn','');
    $( '#' + t ).slideToggle("fast");    
    $(this).find('a').toggleClass("open");
    return false;
});

如何消除多个点击功能？

2 个答案: