Question

我一直在研究切换脚本，但我发现自己重复了我的代码，有没有办法将它全部组合起来？我是jquery的新手，请原谅我的初学者问题。

这就是我所拥有的：

jQuery(document).ready(function($) {
    var topContainer = $("#alles");  
    var topButton = $(".abutton"); 
    topButton.click(function() {
        topContainer.slideToggle(1200, 'easeInOutQuart');
        $(".hideable").slideToggle(1200, 'easeInOutQuart');
    }); 

    var topContainer2 = $("#voorbeelden");  
    var topButton2 = $(".bbutton"); 
    topButton2.click(function() {
        topContainer2.slideToggle(1200, 'easeInOutQuart');
        $(".hideable").slideToggle(1200, 'easeInOutQuart');
    }); 

    var topContainer3 = $("#contact");  
    var topButton3 = $(".cbutton"); 
    topButton3.click(function() {
        topContainer3.slideToggle(1200, 'easeInOutQuart');
         $(".hideable").slideToggle(1200, 'easeInOutQuart');
    }); 
});

我已经学会了在编写CSS时不要重复自己，对jquery也必须如此，对吗？

谢谢别人，学家

Answer 1

您可以将代码拉出到可重复使用的功能中。

function bindStuff(containerId, buttonClass){
    var topContainer = $("#" + containerId);  
    var topButton = $("." + buttonClass); 
    topButton.click(function() {
        topContainer.slideToggle(1200, 'easeInOutQuart');
         $(".hideable").slideToggle(1200, 'easeInOutQuart');
    }); 
}

bindStuff("alles", "abutton");
bindStuff("voorbeelden", "bbutton");
/* ... */

另一个（可能更好）选项是重新考虑你的命名。使用共享类，然后将它们全部绑定为一个。我需要更好地理解你的html，以提出完整的建议。

您可以考虑在http://codereview.stackexchange.com

发布更多代码

Answer 2

当然，你可以创建一个带有适当参数的函数。

function attachHandlers(element, attachment) {
    element = $(element);
    attachment = $(attachment);

    element.click(function() {
        attachment.slideToggle(1200, 'easeInOutQuart');
        $('.hideable').slideToggle(1200, 'easeInOutQuart');
    }
}

然后，您只需使用您关心的所有内容调用attachHandlers即可。在document.ready（）

中执行此操作

attachHandlers('.abutton', '#alles');
attachHandlers('.bbutton', '#voorbeelden');
...

Answer 3

定义你的函数，在你的按钮中添加相同的类，这样你就可以通过一个选择器全部选择它们，然后迭代结果并将你的函数分配给它们中的每一个。

Answer 4

假设您的命名约定有意义，并且您的container元素实际上是按钮的容器：

$(".abutton, .bbutton, .cbutton").click(function() {
    $(this).parent().slideToggle(1200, 'easeInOutQuart');
    $(".hideable").slideToggle(1200, 'easeInOutQuart');
})

切换脚本麻烦

4 个答案: