[英]Fire onClick event to specific div
I have two cards and I am firing an onClick()
event to create a dimmer on top of the card image if a user clicks on Like button (heart icon). 我有两张卡片,如果用户单击“赞”按钮(心形图标),则会触发onClick()
事件以在卡片图像上方创建调光器。 I am trying to create the dimmer on the card image in which user clicked the heart icon. 我正在尝试在用户单击心脏图标的卡片图像上创建调光器。
I tried placing a condition : 我试图提出一个条件:
if (e.target !== this)
return;
But it did not work. 但这没有用。 In real webpage, I will have a long list of cards with no identifier where I can specify the image to be dimmed. 在真实的网页中,我会看到一串没有标识符的卡片,可以在其中指定要变暗的图像。 Is it possible in this scenario? 在这种情况下可以吗?
Updated fiddle . 更新小提琴 。
You should use the current clicked jQuery object $(this)
instead to target the related .imglove
in the same .card
: 你应该使用当前的点击jQuery对象$(this)
,而不是为目标的相关.imglove
在同一.card
:
$(this).closest('.card').find('.imglove').dimmer('show');
NOTE : The .closest('.card')
is used to get the related card
with clicked icon loveit
. 注意: .closest('.card')
用于获取带有单击图标loveit
的相关card
。
Hope this helps. 希望这可以帮助。
$(function() { $(document).on('click', '.loveit', function(e) { e.preventDefault(); $(this).closest('.card').find('.imglove').dimmer('show'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script> <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot </div> <div class="image imglove"> <div class="ui dimmer"> <div class="content"> <div class="center"> <h2 class="ui inverted header">Title</h2> <img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif"> </div> </div> </div> <img src="http://semantic-ui.com/images/avatar2/large/kristy.png"> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon loveit"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input type="text" placeholder="Add Comment..."> </div> </div> </div> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot </div> <div class="image imglove"> <div class="ui dimmer"> <div class="content"> <div class="center"> <h2 class="ui inverted header">Title</h2> <img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif"> </div> </div> </div> <img src="http://semantic-ui.com/images/avatar2/large/kristy.png"> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon loveit"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input type="text" placeholder="Add Comment..."> </div> </div> </div>
So you're trying to limit your interaction to the currently selected image? 因此,您正在尝试将交互仅限于当前选择的图像吗? Also, rather than reference a fiddle, post your working (or non-working) code here. 另外,不要引用小提琴,而是在此处发布您的工作(或非工作)代码。 Easier all around. 各地都比较容易。
jQuery(document).ready(function($) { $(document).on('click', '.loveit', function(e) { e.preventDefault(); $(this).parents(".card").find('.imglove') .dimmer('show'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot </div> <div class="image imglove"> <div class="ui dimmer"> <div class="content"> <div class="center"> <h2 class="ui inverted header">Title</h2> <img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif"> </div> </div> </div> <img src="http://semantic-ui.com/images/avatar2/large/kristy.png"> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon loveit"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input type="text" placeholder="Add Comment..."> </div> </div> </div> <div class="ui card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot </div> <div class="image imglove"> <div class="ui dimmer"> <div class="content"> <div class="center"> <h2 class="ui inverted header">Title</h2> <img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif"> </div> </div> </div> <img src="http://semantic-ui.com/images/avatar2/large/kristy.png"> </div> <div class="content"> <span class="right floated"> <i class="heart outline like icon loveit"></i> 17 likes </span> <i class="comment icon"></i> 3 comments </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input type="text" placeholder="Add Comment..."> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.