javascript - 使用 jQuery 或 JavaScript 使图像在单击期间处于事件状态？

Question

我发现了一个函数，可以使用 jQuery 将选择器更改为事件状态，从而使按钮正常工作。然而，我遇到了问题，即通过单击使带有叠加层的图像进入事件状态。

对于我的 HTML:

<div class="img-container1 image-container" image-var="image1.jpg">
      <%= image_tag('image1.jpg') %>
      <div class="wk-after">
        <div class="centered-wk">
          <span class="fa fa-check-circle check-circle"></span>
        </div>
        <div class="centered-wk wk-select">
          SELECTED
        </div>
      </div>
    </div>

在 CSS 中我有:

.img-container1{
 margin-right: 10px;
 margin-bottom: 10px;
 position: relative;
}
.image-container:hover .wk-after, .image-container.active .wk-after{
display: block;
background: rgba(231, 68, 129, 0.75);
}

.wk-after{
 display: flex;
 justify-content: center;
 align-items: center;
}

.image-container.active .wk-after {
display: block;
background: rgba(231, 68, 129, 0.75);
}

.image-container .wk-after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 16px;
display: none;
color: #FFF;}

.centered-wk {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
align-items: center;}

我尝试使用以下 jQuery 来获取类并进行更改:

$('.img-container1').click(function(){
      console.log('test');
      $('.image-container').removeClass('active');
      $(this).parents('.image-container').addClass('active');
      console.log($(this).closest('.image-container'));
        });

但是这不起作用。我输入控制台日志来查看它是否确实击中了容器，但什么也没有。如果我将其更改为页面上的按钮，则会显示日志。如果我在网页的控制台中手动输入，它实际上会出现。

我应该使用 JavaScript 吗？通过类名添加点击并应用事件类的最佳方法是什么？

编辑:当我直接在网络浏览器控制台中输入此代码时，它会起作用:

var $link = $('.img-container1');
    $link.click(function(){
      $link.removeClass('active');
      console.log("testing");
      $(this).addClass('active');

所以更大的问题是当我加载页面时如何才能让它真正起作用？

Answer 1

如果您的代码在控制台中运行，您可能会在 dom 完全加载之前添加事件监听器。尝试 Ready() 函数或在页面底部添加脚本。

$(document).ready(function() {
      $('.img-container').click(function(){   
            $(this).toggleClass('active');
          });    
    });

toggleClass

jsfiddle example