如何使用语义UI和JQuery使特定卡片上的调光器而不是我的所有卡片库切换

Question

I have a gallery of avatars I want to show my user, which are shown in the card format of Semantic-UI. I want the user to click on one of the images which then triggers Semantic's dimmer to appear in that specific image's place.

What I currently get is that all the images get the dimmer to appear on them instead of the specific one I want. Here is the code that puts the dimmer on all images:

 $(".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> 

The way I envisioned it was that I'll add the class .selectedImage on the image the user wants, then I would be able to toggle the dimmer if selectedImage exists. But when I do use that as so:

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

then nothing appears, no dimmer whatsoever!

What am I doing wrong?

As a side note, I need to figure out how to generate a gallery from a folder of images using EJS and NodeJS, instead of having to hard code each image. I guess the right thing to do would be a seperate question for that?

Answer 1

Your code will dim all .ui.dimmer divs when you click an image:

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

This code will dim only the .ui.dimmer div which is located in the same parent container as the clicked image:

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

Part 2

Your code will set a click handler on all img.selectedImage which exist when you set the event handlers. Unfortunately no images have the selectedImage class at that point so it doesn't work.

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

This code will do the same, but it only requires .selectavatar to exist when the event handler is set up:

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