2

我想在 jquery 中创建 LIKE 和 UNLIKE 按钮，我所做的是，

 <span><a class="like-Unlike" href="">Like</a></span> |
   function LikeUnLikeButton() {
            $(".like-Unlike").click(function (e) {
                if ($(this).html() == "Like") {
                    $(this).html('Unlike');
                }
                else {
                    $(this).html('Like');
                }
            });
        }

但它不起作用，问题是当我点击 LIKE 按钮时，我可以看到不同的按钮，然后它又回到了 LIKE 按钮

请在这里查看：http: //jsfiddle.net/mHJnH/

4

6 回答 6

2

你错过了$(this )的右括号在这里丢失。

改变

  $(this.html('Unlike'));

到 

 $(this).html('Unlike');

由于有问题的更新而编辑

您可能不需要函数 LikeUnLikeButton() {

现场演示

$(".like-Unlike").click(function(e) {
    if ($(this).html() == "Like") {
        $(this).html('Unlike');
    }
    else {
        $(this).html('Like');
    }
    return false;
});​
于 2012-11-06T12:50:30.847 回答
1

您的代码中有一些错误

$(this.html('Unlike'));

应该

$(this).html('Unlike');

情况也是如此

$(this.html('Like'));

应该

$(this).html('Like');

于 2012-11-06T12:51:45.733 回答
1

你快到了！

以下代码有效：

<span><a class="like-Unlike" href="#">Like</a></span>
<script>
function LikeUnLikeButton() {
            $(".like-Unlike").click(function (e) {
                if ($(this).html() == "Like") {
                    $(this).html('Unlike');
                }
                else {
                    $(this).html('Like');
                }
            });
        }
LikeUnLikeButton();
</script>
于 2012-11-06T13:00:26.890 回答
0

试试这个。 http://jsfiddle.net/fedmich/DTABj/

我建议你缓存你的 $(this) 这样它会更快。然后使用 $.data 来存储它是否喜欢，而不仅仅是使用 .html() 来匹配字符串。

$(function() {
$('.like-button').click(function(){
    var obj = $(this);
    if( obj.data('liked') ){
        obj.data('liked', false);
        obj.html('Like');
    }
    else{
        obj.data('liked', true);
        obj.html('Unlike');
    }
});
});​
于 2012-11-06T12:54:11.347 回答
0

而不是$(this).html() == "Like" 使用$(this).val() == "Like" 以便访问按钮的值而不是整个 html 代码。因此，当改变价值使用$(this).val("Like")或 $(this).val("Unlike")

于 2014-08-05T15:19:54.390 回答
0

您应该使用 e.preventDetault 来防止锚标记动作。您可以使用 toggleClass 和 hasClass 来识别而不是比较纯文本。

$('.action').on('click', function(e){
    e.preventDefault();
    var anchorLink = $(this);
    anchorLink.toggleClass('like');
    var text = anchorLink.hasClass('like') ? 'Like' : 'UnLike'
    anchorLink.text(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a class="action like">Like</a>

于 2016-05-23T05:55:48.897 回答