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');