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

查询

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