检测点击图像的类输出错误

问题描述 投票:0回答:2

我试图弄清楚如何使用jQuery检测我点击的图像。当我使用我现在拥有的代码点击图像时它会给我IMG作为输出,但不是我一直在寻找的输出。如果我点击类.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.");
});
jquery function class onclick target
2个回答
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>

1
投票

如果我点击类.i​​的图像,它应该给我.i作为输出。

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

代码片段:(注意:它可以用于点击divimg元素)

$(".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>
© www.soinside.com 2019 - 2024. All rights reserved.