Question

我想在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/

Answer 1

您遗漏了$(this 的右括号。此处缺少

。

更改

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

致

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

由于有问题的更新而进行修改

你可能不需要函数LikeUnLikeButton（）{

<强> Live Demo

$(".like-Unlike").click(function(e) { if ($(this).html() == "Like") { $(this).html('Unlike'); } else { $(this).html('Like'); } return false; });

Answer 2

您的代码中有一些错误

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

应该是

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

的情况相同

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

应该是

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

Answer 3

你快到了！

以下代码有效：

<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>

Answer 4

试一试。 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');
    }
});
});

Answer 5

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

Answer 6

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

＆＃13;

<ul style="list-style-type:none">
<li class="tick">Active directory management</li>
</ul>

＆＃13;

$('.action').on('click', function(e){
    e.preventDefault();
    var anchorLink = $(this);
    anchorLink.toggleClass('like');
    var text = anchorLink.hasClass('like') ? 'Like' : 'UnLike'
    anchorLink.text(text);
})

＆＃13;

如何在jquery中创建LIKE和UNLIKE按钮

6 个答案: