检测 class 的点击图片输出错误

Question

我正在尝试弄清楚如何使用 jQuery 检测我点击的图像。当我使用我现在拥有的代码单击图像时，它给我 IMG 作为输出，但不是我一直在寻找的输出。如果我点击带有 class .i 的图像，它应该给我 .i 作为输出。现在我得到 IMG 作为输出。

HTML:

<div class="row">
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper i">
      <img src="media/i-formatie.jpg" class="img-responsive">
    </div>
      I-formatie
  </div>
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper u">
      <img src="media/u-formatie.jpg" class="img-responsive">
    </div>
      U-formatie
    </div>
    <div class="col-xs-4 col-md-4 text-center">
      <div class="img-wrapper o">
        <img src="media/o-formatie.jpg" class="img-responsive">
      </div>
      O-formatie
    </div>
</div>

jQuery:

$(".i,.u,.o").click(function(event){
  $("#S-formatie").html("Triggered by a " + event.target.nodeName + " element.");
});

Answer 1

event.target 是您点击的实际内容。

event.currentTarget 是附加了事件侦听器的东西。

$(".i,.u,.o").click(function(event) {
  $("#S-formatie").html("Triggered by a " + event.currentTarget.classList[1] + " element.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="S-formatie"></div>
<div class="row">
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper i">
      <img src="http://via.placeholder.com/350x150" class="img-responsive">
    </div>
    I-formatie
  </div>
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper u">
      <img src="http://via.placeholder.com/350x150" class="img-responsive">
    </div>
    U-formatie
  </div>
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper o">
      <img src="http://via.placeholder.com/350x150" class="img-responsive">
    </div>
    O-formatie
  </div>
</div>

Answer 2

If I click on the image with the class .i, it should give me .i as output.

要实现您的要求，请在元素中使用 classList 属性，如下面的代码片段。

代码片段：（注意：它适用于点击 div 和 img 元素）

$(".i,.u,.o").click(function(event) {      
  $("#S-formatie").html("Triggered by a " + this.classList[1] + " element.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper i">
      <img src="media/i-formatie.jpg" class="img-responsive">
    </div>
    I-formatie
  </div>
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper u">
      <img src="media/u-formatie.jpg" class="img-responsive">
    </div>
    U-formatie
  </div>
  <div class="col-xs-4 col-md-4 text-center">
    <div class="img-wrapper o">
      <img src="media/o-formatie.jpg" class="img-responsive">
    </div>
    O-formatie
  </div>
</div>
<div id="S-formatie"></div>

检测 class 的点击图片输出错误

Detect class of clicked image getting wrong output

jquery

class

function

onclick

target