使用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吗？通过班级名称添加单击并应用活动类的最佳方法是什么？

edit ：当我将其直接键入Web浏览器控制台时，此代码可以工作：

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示例

Answer 2

怎么样？

  $('.img-container1').click(function(){
    var isActive = $(this).hasClass('active');
    $('.img-container1').removeClass('active');
    if(isActive == false){
      $(this).addClass('active');
    }
  });

Answer 3

，所以这是实际解决方案：

var $link = $('.img-container1');
$('.img-group').on("click", '.img-container1', function(){
$link.removeClass('active');
$(this).addClass('active');
});

显然我需要将img-container1绑定到父类。