使用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嗎？ 通過班級名稱添加單擊並應用活動班級的最佳方法是什么？

編輯 ：當我直接將其輸入到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綁定到父類，並且它可以工作。