如何使用语义UI和JQuery将特定卡片上的调光器设置为切换而不是所有的卡片库
如何使用语义UI和JQuery将特定卡片上的调光器设置为切换而不是所有的卡片库
提问于 2017-07-10 21:52:58
我有一个化身图库，我想向我的用户展示，这些化身以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从图像文件夹生成一个图库，而不是硬编码每个图像。我想正确的做法应该是一个单独的问题？
Stack Overflow用户
回答已采纳
发布于 2017-07-10 22:24:38
当您单击图像时，您的代码将使所有.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
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45013876
复制相关文章
相似问题
腾讯云开发者
