Question

我正在尝试创建一些单击图像的东西，它只是被另一个相同尺寸的图像替换。

我几乎可以使用下面的jQuery，但它并没有正确地改变类。 '之前'图像有一个类，其中：悬停改变它的不透明度。点击后我不希望图像也这样做，所以我为'after'图像创建了第二个类。但是它不会改变类。

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>

Answer 1

你的班级名字不是。真心实意。的。类名前面只用于CSS选择器，而不是添加或删除类

Answer 2

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

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

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

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

到

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

Answer 3

这两行是错误的。

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

使用removeClass()和addClass()时，请勿包含该点。它应该是这样的：

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

Answer 4

您的班级名称是“心脏”，因此您的选择器$(".heart")是正确的，但是当您使用addClass，removeClass和toggleClass方法时，请使用实际班级名称：addClass("heart")。

类不会使用jQuery交换

4 个答案: