用jQuery點擊打開圖片庫

-1

因此，我有一個頁面，有一串產品縮略圖，他們每個人都應該有一個按鈕點擊下滑的圖庫。我這樣做，但問題是，當我點擊一個按鈕，它滑下每個產品的畫廊，我不想這樣。我知道我可以通過在按鈕和圖庫上添加不同的ID來實現這一點，但這需要我複製和粘貼代碼很多次，這不是一個好習慣。我不是jQuery專家，我對DOM遍歷知之甚少，所以我需要一些幫助，只是爲了指向正確的方向。用jQuery點擊打開圖片庫

這裏是筆我做了演示：https://codepen.io/anon/pen/EmbdXz

，這是我的jQuery：

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(".gallery").slideToggle(); 
});

正如你可以在筆看到當你點擊「圖片」它觸發所有的圖片庫的在頁面上。我也試圖與這個代碼，但沒有奏效：

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(this).closest(".gallery").slideToggle(); 
});

任何意見將幫助。提前致謝。 :)

來源

2017-05-07 MatoriNaBelom

$(this).siblings(".gallery").slideToggle();

來源

2017-05-07 23:53:54

該死的，那太簡單了。愛你的男人<3 – MatoriNaBelom

所有您需要做的僅僅是用.next()取代.closest()在第二次嘗試：

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(this).next(".gallery").slideToggle(); 
});

我創建了一個新的小提琴展示這方面的工作here。

請注意，您也有#galleryTrigger的重複ID，這可能會導致與jQuery混淆（除了無效的標記）。你可能想用類替代。

希望這會有所幫助！ :)

來源

2017-05-07 23:54:52

謝謝你的回答，這個也可以。 :)我只是複製並粘貼代碼以使其更快完成，因此忘記了重複項，感謝您的高舉。 :) – MatoriNaBelom

試試這個。

$(this).parent().find(".gallery").slideToggle();

來源

2017-05-07 23:58:12

用jQuery點擊打開圖片庫

回答

相關問題