类不会使用 jQuery 交换答案

【问题标题】：Classes won't swap using jQuery类不会使用 jQuery 交换
【发布时间】：2011-09-07 20:34:52
【问题描述】：

我正在尝试创建一些东西，您点击一个图像，它就会被另一个相同尺寸的图像替换。

我几乎可以使用下面的 jQuery 来实现这一点，但是它没有正确更改类。 “之前”图像有一个类，其中 :hover 改变它的不透明度。单击后，我不希望图像执行相同的操作，因此我为“后”图像创建了第二个类。但是它不会改变类。

HTML：

<div id="vote">
  <img src="images/icon-voteheart2.png" class="heart" />
  <h2>12</h2>
</div>

Javascript：

<script type="text/javascript"> 
  $(function() {
    $('.heart').click(function() {
        $(".heart").fadeOut('fast');
        $(".heart").fadeIn('fast');
        $(".heart").attr('src', "images/icon-tick.png");
        $(this).removeClass(".heart");
        $(this).addClass(".heartnew");
        return false;
    });
  });
< /script>

【问题讨论】：

当这个点击处理程序运行时会发生什么？

标签： jquery html css class

【解决方案1】：

你的类名不是 .heart 它只是心脏。这。类名的前面仅用于 CSS 选择器，不用于添加或删除类

【讨论】：

【解决方案2】：

由于heart类是动态生成和删除的，所以需要使用live函数

$('.heart').live("click", function() {
   //etc
});

另外，.heart 不是类的名称。你需要改变

$(this).removeClass(".heart"); 
$(this).addClass(".heartnew");

到

$(this).removeClass("heart"); 
$(this).addClass("heartnew");

【讨论】：

【解决方案3】：

这两行是错误的。

    $(this).removeClass(".heart");
    $(this).addClass(".heartnew");

当使用removeClass() 和addClass() 时，不要包含点。应该是这样的：

    $(this).removeClass("heart");
    $(this).addClass("heartnew");

【讨论】：

@Richard James ... 欢迎您！

【解决方案4】：

您的类名是“heart”，所以您的选择器$(".heart") 是正确的，但是当您使用addClass、removeClass 和toggleClass 方法时，请使用实际的类名：addClass("heart")。

【讨论】：