Question

我有一个类似的功能，默认情况下它是黑色的颜色，每当用户点击相似的按钮时，它变成蓝色，并且＃34;喜欢＆＃34;文本将出现在类似图标

之外

它正常工作，点击“喜欢”将变为蓝色，然后再次点击它将变为黑色。当我使用追加功能时，问题就出现了，当我喜欢它时，＆＃34; LikedLiked＆＃34;正在展示，它应该是1＆＃39;喜欢＆＃34;只有当我再次单击类似按钮时，它会删除包括类似图标在内的所有元素。我想要的只是删除文本。

这是我的代码

<div class="extra content">
  <a class="likeicon">
  <i class="fa fa-thumbs-o-up" aria-hidden="true" ></i>
  </a>

我的jQuery

$(".likeicon").click(function(){
if($(this).css("color") === "rgb(0, 0, 255)"){
  $(this).css("color", "black");
  $(this).empty();
} else {
  $(this).css("color", "blue");
  $(this).append("Liked")
}  
});

我已经在stackoverflow上查了一下，我尝试使用.empty（）和.remove（）。但他们都得到了我的文字和我喜欢的图标/

谢谢！

Answer 1

您可以使用css：

执行此操作

＆＃13;

$(".likeicon").click(function(){
	$(this).toggleClass('active'); 
});

＆＃13;

.likeicon.active i{
  color: blue;
}
.likeicon{
  cursor: pointer;
}
.likeicon span{
  display: none;
  color: blue;
}
.likeicon.active span{
  display: inline;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="extra content">
  <a class="likeicon">
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
    <span>Liked</span>
  </a>

＆＃13;

Answer 2

您可以在元素

的elemrnt中添加文字

 $(this).append('<span id="liked_txt">Liked</span>');

如果要删除它，请使用

$("#liked_txt").remove();

Answer 3

你可以用一些额外的CSS来做到这一点。尝试使用：after伪元素：

.likeicon {
    color: black;
}

.like:after {
    content: "liked";
    color: blue;
}

然后使用jQuery在click处理程序中添加和删除'like'类到锚标记。

$('.likeicon').click(function(e) {
    e.defaultPrevented;
    if ($(this).hasClass('like')) {
        $(this).removeClass('like');
    }
    else {
        $(this).addClass('like');
    }
});

jQuery删除附加文本

3 个答案: