Fire onClick event to specific div

У меня есть две карты, и я запускаю событие onClick(), чтобы создать диммер поверх изображения карты, если пользователь нажимает кнопку Like (значок сердца). Я пытаюсь создать диммер на изображении карты, в котором пользователь щелкнул значок сердца.Fire onClick event to specific div

Я попытался размещая условие:

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

Но это не сработало. На реальной веб-странице у меня будет длинный список карт без идентификатора, где я могу указать, что изображение будет затемнено. Возможно ли это в этом сценарии?

JSFiddle

источник

2017-02-01 Super Man

В случае захвата событий или пузырькового event.target могут быть разными f введите элемент ('this'), на котором зарегистрировано событие. – Agalo

Updated fiddle.

Вы должны использовать текущий щелкнул JQuery объект $(this) вместо того, чтобы предназначаться в том же .card соответстующем .imglove:

$(this).closest('.card').find('.imglove').dimmer('show');

ПРИМЕЧАНИЕ:.closest('.card') используется для получения связанной с card щелкнули значок loveit.

Надеюсь, это поможет.

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

Так что вы пытаетесь ограничить взаимодействие с выбранного изображения? Кроме того, вместо ссылки на скрипку, разместите здесь свой рабочий (или нерабочий) код. Легче вокруг.

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

Target он 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

ответ

Смежные вопросы