jQuery事件僅適用一次

Question

請幫助jquery / javascript noob，我想這是一個常見問題，我已經嘗試過將.on方法更改為.delegate和.live ..的方法，但這沒有幫助。 我的問題是背景圖像僅在第一次單擊時發生更改。

HTML

      <article class="panel" id="imgLoader">
        <figure class="imgBG img1">
        </figure>
      </article><!-- end panel -->
      <div class="panel" id="imgSlides">
        <ul class="column">
          <li id="img1" class="imgBG img1"></li>
          <li id="img2" class="imgBG img2"></li>
          <li id="img3" class="imgBG img3"></li>
          <li id="img4" class="imgBG img4"></li>
        </ul>
      </div><!-- end panel -->

CSS

/*---------------------
     Img Classes
---------------------*/
.imgBG {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.img1 {
  background-image: url('../images/signupbg1.jpg');
}
.img2 {
  background-image: url('../images/signupbg2.jpg');
}
.img3 {
  background-image: url('../images/signupbg3.jpg');
}
.img4 {
  background-image: url('../images/signupbg4.jpg');
}

jQuery的

$(function() {

  $('#img2').on('click', function() {

    $('#imgLoader figure').removeClass('img1', 'img2', 'img3', 'img4').addClass('img2');

  });

  $('#img3').on('click', function() {

    $('#imgLoader figure').removeClass('img1', 'img2', 'img3', 'img4').addClass('img3');

  });

});

我也嘗試只使用.css（'background-image'，'url（）'）; 以及..但是由於某種原因收到了錯誤..謝謝。

Answer 1

removeClass方法不使用多個參數，它使用空格分隔的類名稱字符串：

$('#imgLoader figure').removeClass('img1 img2 img3 img4').addClass('img2');