Question

我有两张卡片，如果用户点击了Like按钮（心形图标），我会触发onClick()事件在卡片图像上创建一个调光器。我正在尝试在卡片图像上创建调光器，用户单击心脏图标。

我尝试了一个条件：

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

但它没有用。在真实的网页中，我将有一长串没有标识符的卡片，我可以指定要变暗的图像。在这种情况下是否可能？

JSFiddle

Answer 1

<强> Updated fiddle

您应该使用当前单击的jQuery对象<?php session_start(); include ("connection.php"); $getId=$_REQUEST["id"]; echo $_SESSION['nama']; ?>来定位相同$(this)中的相关.imglove：

.card

注意： $(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');
  });
});

Answer 2

因此，您是否尝试将交互限制为当前所选图片？此外，请在此处发布您的工作（或非工作）代码，而不是引用小提琴。周围更容易。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用课程parent定位card，然后find课程imglove并将dimmer添加到其中

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

DEMO

将onClick事件触发到特定div

3 个答案: