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

Posted 2021-04-20

我试图弄清楚如何使用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.");
});

答案

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>

另一答案

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

要实现您的要求，请在元素中使用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>

以上是关于检测点击图像的类输出错误的主要内容，如果未能解决你的问题，请参考以下文章

收藏|分享前端开发常用代码片段

图像分析技术及应用的最终项目：基于Matlab的胶囊缺陷检测

图像分析技术及应用的最终项目：基于Matlab的胶囊缺陷检测

✠OpenGL-2-图像管线

php imagick调整图像代码无法正常工作

调整图像大小后检测公差颜色