Question

我有一个类smallimage的div - 当我点击smallimage时我想删除类smallimage并添加一个名为bigimage的类。

使用下面的代码，当我点击div时，它会移除smallimage并添加bigimage，但是当我再次单击时，它不会删除bigimage并添加backimage。我想在点击时切换类smallimage和bigimage。

提前致谢！

<script>
  $('.smallimage').click(function() {
    $(this).addClass('bigimage');
    $(this).removeClass('smallimage');
  });

  $('.bigimage').click(function() {
    $(this).addClass('smallimage');
    $(this).removeClass('bigimage');
  });
</script>

Answer 1

请尝试以下操作。

$(document).on('click','.smallimage, .bigimage', function() {
   $(this).toggleClass('smallimage bigimage');
});

JSFiddle

Answer 2

您需要 event delegation 。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

试试这个：

$(document).on('click','.smallimage',function() {
    $(this).addClass('bigimage');
    $(this).removeClass('smallimage');
});
$(document).on('click','.bigimage',function() {
    $(this).addClass('smallimage');
    $(this).removeClass('bigimage');
});

Answer 3

您可以使用toggleClass：

$('.smallimage').on('click', function () {
  $(this).toggleClass('smallimage bigimage');
});

假设它以smallimage类名开始。

这是一个非常类似的小型演示：http://jsbin.com/wiyub/1/edit?html,css,js,output

Answer 4

考虑使用toggleClass（） - https://api.jquery.com/toggleClass/

$('div.smallimage').click(function() {
    $(this).toggleClass('smallimage bigimage');
});

这是一个演示文字的小提琴 - http://jsfiddle.net/jayblanchard/5j8aJ/2/使用浏览器的DOM检查器查看更改。

编辑：更新以更容易地适应OP的问题。

Answer 5

工作jsbin：http://jsbin.com/mamew/1/edit

拥有图片代码的通用ID：

<div class="smallimage" id="imageId">
  <img src=""/>
  </div>

然后使用以下代码

$('#imageId').click(function(){
  if($(this).hasClass('smallimage')) {
      $(this).removeClass('smallimage').addClass('bigimage');
  }
  else {
      $(this).removeClass("bigimage").addClass('smallimage');
  }
});

单击jQuery上的类之间切换

5 个答案: