如何使用语义 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>

我设想的方式是在用户想要的图像上添加 class .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 class，因此它不起作用。

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

此代码将做同样的事情，但它只需要在设置事件处理程序时存在 .selectavatar：

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

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

How to get dimmer on specific card to toggle rather than all my card gallery using Semantic UI and JQuery

javascript

jquery

dom-manipulation

node.js

semantic-ui