[英]Fire onClick event to specific div
我有兩張卡片,如果用戶單擊“贊”按鈕(心形圖標),則會觸發onClick()
事件以在卡片圖像上方創建調光器。 我正在嘗試在用戶單擊心臟圖標的卡片圖像上創建調光器。
我試圖提出一個條件:
if (e.target !== this)
return;
但這沒有用。 在真實的網頁中,我會看到一串沒有標識符的卡片,可以在其中指定要變暗的圖像。 在這種情況下可以嗎?
更新小提琴 。
你應該使用當前的點擊jQuery對象$(this)
,而不是為目標的相關.imglove
在同一.card
:
$(this).closest('.card').find('.imglove').dimmer('show');
注意: .closest('.card')
用於獲取帶有單擊圖標loveit
的相關card
。
希望這可以幫助。
$(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>
因此,您正在嘗試將交互僅限於當前選擇的圖像嗎? 另外,不要引用小提琴,而是在此處發布您的工作(或非工作)代碼。 各地都比較容易。
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>
使用課程card
將其定位parent
對象,然后find
課程imglove
並imglove
添加dimmer
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
$(this).parents('.card').find('.imglove').dimmer('show');
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.