如何僅爲子元素運行jQuery函數？

我試圖摺疊所有的孩子評論，包括父母評論時，當一些點擊圖標嵌套在家長評論內的評論。如何僅爲子元素運行jQuery函數？

使用下面的jQuery代碼，我能夠獲得評論框摺疊，但現在另一部分內的註釋也崩潰了。

jQuery代碼 -

$('.comment-toggle pre').on('click', function(e) { 
    $(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() { 
     if ($(this).is(':visible')) { 
      $(".comment-toggle pre").text('[–]'); 
     } else { 
      $(".comment-toggle pre").text('[+]'); 
     } 
    }); 
}); 
$('.comment-toggle pre').on('click', function(e) { 
    $('.single-comment-wrapper .left-side').slideToggle('fast'); 
});

由於HTMLand CSS太長。我創建了一個codepen。以下是它的直接鏈接。

https://codepen.io/anon/pen/Vzrvbm

在此先感謝。

來源

2017-08-16 rowdy

-1

我認爲，你應該使用不同的div類。因爲當你點擊.content-togle類時，javascript代碼會執行所有的動作.single-comment-wrapper .comment-text，.single-comment-wrapper .comment-bottom，.single-comment-outer .child-comment classes。

來源

2017-08-16 04:50:40

您的div的結構使得這個棘手的，我一直在玩弄在搗鼓〜10分鐘，並都拿出了這一點 - 它在正確的方向前進，但並不完美......

$('.comment-toggle pre').on('click', function(e) { 
    $(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() {

所有的加號和減號都會改變，因爲當前你的代碼是針對類的，它需要改變爲相對於+/-點擊的$（this）。等

來源

2017-08-16 04:56:58

更新您的jQuery搜索相應的元素，你點擊的元素：

$('.comment-toggle pre').on('click', function(e) { 

    // find main comment element 
    var rootComment = $(this).closest('.single-comment-wrapper'); 

    // hide child comments of current comment 
    var children = rootComment.parent().find('>.child-comment'); 
    children.slideToggle('fast'); 

    // hide left part 
    rootComment.find('.left-side').slideToggle('fast'); 

    // hide current comment 
    rootComment.find('.comment-text').toggle('fast', function() { 
    if ($(this).is(':visible')) { 
     rootComment.find(".comment-toggle pre", this).text('[–]'); 
     } else { 
      rootComment.find(".comment-toggle pre", this).text('[+]'); 
     } 
    }); 
});

另外，如果你可以改變的標記兒童包括主comment元素的context元素這將是更容易與...合作。基於ul的樹狀視圖將簡化標記並減少HTML元素的數量。

來源

2017-08-16 05:15:29 Samich

感謝您的回答，但不幸的是，您的代碼無法正常工作。問題仍然存在 - a）現在，當評論崩潰時，它看起來像這樣 - http://i.imgur.com/BmL5tOX.png，但我想它看起來像這樣 - https：//我。 imgur.com/P7mhuYc.png b）當我點擊第二個評論 - （https://i.imgur.com/E6D7B4E.png），它是下面所有評論的家長評論，它是摺疊上面的評論它也是如此。 – rowdy

已更新的答案。現在每個評論都會保存它的狀態，並且隱藏評論的內容也會隱藏。結束，您可以移除「parent-comment」類。 – Samich

如何僅爲子元素運行jQuery函數？

回答

相關問題