切換在頁面上出現兩次的元素

Question

我正在使用在頁面上出現兩次的html組件。

我遇到的問題是，當我單擊一個組件以切換其內容時（例如手風琴），兩個組件同時切換。

當我分別單擊它們時，如何給JS重寫以切換每個組件，而又不給組件提供不同的類並重寫JS兩次呢？

這是我到目前為止所擁有的；

var bindEventsToUI = function () {        
        $(".details").click(function(e){
            $(".content").slideToggle("slow", function() {
                $(e.target).hide().siblings().show();
            });
        });
    };

Answer 1

嘗試這個：

 $(".details").click(function(e) { $(this).children(".content").slideToggle("slow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='details'>Testing 123 <div class='content'>> Content 123</div> </div> <div class='details'>Testing 456 <div class='content'>> Content 456</div> </div> 

Answer 2

您將需要為每個元素使用不同的標識符。 我會推薦一個id ：

var bindEventsToUI = function () {//element) {        
    $("#id1 .details").click(function(e){
        $("#id1 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    $("#id2 .details").click(function(e){
        $("#id2 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    //..and so on
};

或者，您可以使用closest函數：

var bindEventsToUI = function () {//element) {        
    $(".details").click(function(e){
        $(this).closest(".content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
};