jquery单击replace，再次单击replace

Question

只是一个简单的问题，我如何告诉jquery在第一次单击时执行action1，当用户再次单击时，它应该执行操作，然后重新启动操作？例如:用户点击like，文本应更改为不同，当用户按下不同时，它应更改为like，以此类推。

<a href="#" class="like">Like</a>

$('.like').click(function(){
//ajax
    $(this).html('Remove like');
},function(){
    $(this).html('like');
});

但它似乎只起作用一次，比如当用户单击它时，它会更改为删除，而当我再次单击时，什么也不会发生

Answer 1

使用jquery toggle handler。

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )

handler(eventObject)  A function to execute every even time the element is clicked.
handler(eventObject)  A function to execute every odd time the element is clicked.
handler(eventObject)  Additional handlers to cycle through after clicks.

例如：

$('.like').toggle(function() {
    //ajax
    $(this).html('Remove like');
}, function() {
    $(this).html('like');
});

Answer 2

尝试：

var first = true;

$('.like').click(function(){
  if(first){
    $(this).html('Remove like');
    first = false;
}else{

    $(this).html('like');
    first = true;
}
});

或者：

var first = true;

$('.like').click(function(){
  var text = "";
    ($(this).html() == "like"){
       text = "Remove like";
    }else{
       text = "like";
    }
    $(this).html(text)
});

Answer 3

您可以按如下方式执行此操作

HTML

<a href="#" class="like" id="button">Like</a>

Jquery

$("#button").click(function(event){
    event.preventDefault();

    if($(this).hasClass('like'))
    {

        $(this).html('Remove like');
        $(this).removeClass("like");
        $(this).addClass("unlike");
    }else{

        $(this).html('like');
        $(this).removeClass("unlike");
        $(this).addClass("like");
    }

});

Live Demo

编辑:更简单

$("#button").click(function(){
    if($(this).hasClass('like'))
    {        
        $(this).html('Remove like');
        $(this).toggleClass("like unlike");

    }else{        
        $(this).html('like');
        $(this).toggleClass("like unlike");
    }

});