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

Jquery事件只能运行一次

1 个答案: