-1

我一直在编写切换脚本，但我发现自己重复了我的代码，有没有办法将它们结合起来？我是 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 也必须如此，对吧？

谢谢大家，J。

4

4 回答 4

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上发布更多代码

于 2013-09-16T13:26:40.267 回答
0

当然，您可以创建一个采用适当参数的函数。

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');
...
于 2013-09-16T13:26:42.283 回答
0

定义您的功能，将相同的类添加到您的按钮，以便您可以通过一个选择器全部选择它们，然后迭代结果并将您的功能分配给它们中的每一个。

于 2013-09-16T13:27:09.893 回答
0

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

$(".abutton, .bbutton, .cbutton").click(function() {
    $(this).parent().slideToggle(1200, 'easeInOutQuart');
    $(".hideable").slideToggle(1200, 'easeInOutQuart');
})
于 2013-09-16T13:32:11.970 回答