Question

我在一个页面中有4个图像，需要将style1应用到所有这些图像，但是当我单击每个图像时，我需要删除style1并应用style2但仅仅是单击，其他的必须保留为style1。我尝试使用此代码但没有成功：

$(document).ready({
  $('img').removeClass();
  $('img').addClass('style1');

  $('img').click(function(){
    $(this).removeClass();
    $(this).addClass('style2');
  });
});

有任何帮助吗？我做错了什么？干杯和thx提前

Answer 1

您是否忘记了function()中的$(document).ready()部分，还是只是一个印刷错误？

我添加了它，一切似乎都有效：

$(document).ready(function(){
  $('img').removeClass();
  $('img').addClass('style1');

  $('img').click(function(){
    $(this).removeClass();
    $(this).addClass('style2');
  });
});

检查here

另外，如果您想要在另一次点击中删除style2，请查看上面的答案，了解toggleClass()的使用情况

Answer 2

略有调整，但基本相同：

  $('img').addClass('style1');

  $('img').click(function(){
    $(this).removeClass('style1').addClass('style2');
  });

http://jsfiddle.net/FmCGu/

Answer 3

完全工作的小提琴，只提供一次和切换：

http://jsfiddle.net/46hxR/

$(document).ready(function(){

      /* To toggle the classes instead of adding, just delete these 3 lines following this comment, then keep reading */
  $('img').addClass('style1');
  $('img').click(function(){
    $(this).removeClass('style1').addClass('style2');

  /* To toggle the classes instead of just adding, remove this line...
  $('img').toggleClass('style1').toggleClass('style2');
  $('img').click(function(){
    $(this).toggleClass('style1').toggleClass('style2');
  ... And this one too! */
  });
});

将样式应用于单击的图像而不是全部

3 个答案: