尝试在jQuery中向图像添加类时遇到问题

Question

代码如下：

$(function()
{
  $('.sign1').click(function(){
    $(this).addClass('good');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-xs-6 menu-item">
        <div class="front">
        <a href="main.html"><img class="center-block sign1" src="images/sign1.png"></a>
        </div>
      </div>
    </div>
  </div>
</div>

点击带有“ sign1”类的图像时，应该添加“ good”类 但这永远不会发生。

我的代码有什么问题吗？

Answer 1

如果删除<a>元素周围的链接<img>，则代码工作正常。

jquery将good类添加到图像后，单击甚至冒泡到其父级<a>，这会将浏览器定向到新地址：main.html。

所以您没有时间看到我的更改。

Answer 2

您可以像下面这样编码

var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");