如何使用語義UI和JQuery使特定卡片上的調光器而不是我的所有卡片庫切換

Question

我有一個要顯示給用戶的化身畫廊，這些化身以Semantic-UI的卡格式顯示。 我希望用戶單擊其中一張圖像，然后觸發語義調光器出現在該特定圖像的位置。

我目前得到的是所有圖像都經過調光器顯示，而不是我想要的特定圖像。 這是將調光器放置在所有圖像上的代碼：

 $(".selectavatar img").hover(function() { $('.selectavatar img').removeClass('selectedImage'); $(this).toggleClass("selectedImage"); }); $(".selectavatar img").click(function() { $(".ui.dimmer").dimmer("toggle"); }); 

  <!--gallery goes here--> <div class="ui three column grid selectavatar"> <div class="five wide column"> <div class="ui segment"> <form action="/account/<%=currentUser._id%>?_method=PUT" method="POST"> <input name="user[image]" type"submit" value = "image1.jpg" class="hidden" /> <img name="user[image]" src = "image1.jpg" width=300> <div class="ui dimmer"> <div class="content"> <div class="center"> <button class="ui button blue" type="Submit"> <i class="user icon"></i> Select Avatar </button> </div> </div> </div> </form> </div> </div> <div class="five wide column"> <div class="ui segment"> <form action="/account/<%=currentUser._id%>?_method=PUT" method="POST"> <input name="user[image]" type"submit" value = "image2.png" class="hidden" /> <img name="user[image]" src = "image2.png" width=300> <div class="ui dimmer"> <div class="content"> <div class="center"> <button class="ui button blue" type="Submit"> <i class="user icon"></i> Select Avatar </button> </div> </div> </div> </form> </div> </div> 

我設想的方式是，我將在用戶想要的圖像上添加類.selectedImage ，然后如果selectedImage存在，我將能夠切換調光器。 但是當我這樣使用時：

$(".selectavatar img.selectedImage").click(function() {
  $(".ui.dimmer").dimmer("toggle");
});

那么什么也沒出現，沒有任何調光器！

我究竟做錯了什么？

附帶說明一下，我需要弄清楚如何使用EJS和NodeJS從圖像文件夾生成圖庫，而不是必須對每個圖像進行硬編碼。 我猜想正確的事將是一個單獨的問題？

Answer 1

單擊圖像時，您的代碼將使所有.ui.dimmer div變暗：

$(".selectavatar img").click(function() {
  $(".ui.dimmer").dimmer("toggle");
});

此代碼只會使與單擊的圖像位於同一父容器中的.ui.dimmer div變暗：

$(".selectavatar img").click(function() {
  $(this).parent().find(".ui.dimmer").dimmer("toggle");
});

第2部分

您的代碼將在設置事件處理程序時存在的所有img.selectedImage上設置一個單擊處理程序。 不幸的是，那時沒有圖像具有selectedImage類，因此它不起作用。

$(".selectavatar img.selectedImage").click(function() {
  //code
});

此代碼將執行相同的操作，但是在設置事件處理程序時，僅要求.selectavatar存在：

$(".selectavatar").on("click", "img.selectedImage", function() {
  //code
});