1. 首頁
  2. 問答
  3. Fire onClick事件到特定格

Fire onClick事件到特定格

2017-02-01 61 views
1

我有兩張卡片，如果用戶點擊Like按鈕（心臟圖標），我會發起一個onClick()事件以在卡片圖像頂部創建一個調光器。我試圖在用戶點擊心臟圖標的卡片圖像上創建調光器。Fire onClick事件到特定格

我試圖把一個條件：

if (e.target !== this) 
    return;

但沒有奏效。在真實的網頁中，我將有一長串沒有標識符的卡片，我可以指定要變暗的圖像。在這種情況下可能嗎？

JSFiddle

來源

2017-02-01 Super Man

+0

在事件捕獲或氣泡的Event.Target的情況下可以是不同的f從註冊事件的元素（'this'）開始。 – Agalo

回答

1

Updated fiddle。

你應該使用當前的點擊jQuery對象$(this)而不是指定同一.card相關.imglove：

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

來源

2017-02-01 15:58:48

1

所以，你想你的互動限制在當前選擇的影像？此外，而不是參考小提琴，在這裏發佈您的工作（或非工作）的代碼。周圍更容易。

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>

來源

2017-02-01 16:00:12 Snowmonkey

0

目標它parent與card類然後find類imglove並添加dimmer它

jQuery(document).ready(function($) { 
    $(document).on('click', '.loveit', function(e) { 
    $(this).parents('.card').find('.imglove').dimmer('show'); 
    }); 
});

DEMO

來源

2017-02-01 16:07:45 brk

相關問題

 相關問題