特定の部門に火災のonClickイベント

Question

私は2枚のカードを持っていて、ユーザーがLikeボタン（ハートアイコン）をクリックすると、カードイメージの上に調光器を作成するためにonClick()イベントを発射しています。ユーザーが心臓のアイコンをクリックしたカードイメージに調光器を作成しようとしています。

私は条件置いてみました：

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

をしかし、それは動作しませんでした。実際のWebページでは、識別子を持たないカードのリストを長くして、淡色表示する画像を指定できます。このシナリオで可能ですか？

JSFiddle

Answer 1

Updated fiddle。

あなたが現在を使用する必要がありますが、同じ.cardに関連.imgloveをターゲットにする代わりに、jQueryオブジェクト$(this)をクリック：

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

Answer 2

だから、現在選択されている画像に、あなたの相互作用を制限しようとしていますか？また、フィドルを参照するのではなく、作業中のコードをここに投稿してください。すべてを簡単に。

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>

Answer 3

ターゲットそれクラスcardfind次いでクラスimgloveとparent、イベントキャプチャまたはバブルEvent.Targetの場合において

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

DEMO