切換腳本的問題

-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.

來源

2013-09-16 Jonathan 79

這真的不能在jQuery的工作要做，但你可以編寫自己的循環或函數來做到這一點。 – simonzack

完美可行的，如果它們的母體易於與所有3個標準方法（即直接父，或與類「容器」的第一個親本，等等）找到 – SmokeyPHP

沒有事情是它是它們由三個不同的按鈕切換三個不同的項 –

你可以拉出來的代碼到可重複使用的功能。

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-16 13:26:40

好一個，那就是：http://codereview.stackexchange.com/questions/31367/toggle-script-麻煩 –

當然更張貼你的代碼，你可以做一個函數，相應的參數。

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-16 13:26:42 Jordan

內做到這一點您定義功能，通過一個選擇同一類添加到您的按鈕，這樣你就可以全部選擇所有這些，然後遍歷結果和你的函數分配給他們每個人。

來源

2013-09-16 13:27:09 Gatekeeper

假設你的命名約定是有意義的，和你的container元素實際上是按鈕的容器：

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

來源

2013-09-16 13:32:11 SmokeyPHP

切換腳本的問題

回答

相關問題