jquery - Jquery在div元素中切换文本

Question

有没有一种好方法可以简单地将“添加到购物车”更改为“从购物车中删除”但保留所有按钮和链接属性，点击 Jquery？

HTML

<div class = "checkout_icon"> <a href="#" class="button">Add to cart</a> </div>

jQuery

$('.checkout_icon a ').on('click', function(e) {  

    if($(this).hasClass('selected')){
         //
    }else{
        $('.checkout_icon').html($('<div>').append($('Remove from Cart', '#div')).html());
    }

});

Answer 1

简单地：

$('.checkout_icon a').text('Remove from Cart');

在click活动内部：

$('.checkout_icon a').click(function(){
    var $this = $(this);
    this.innerHTML = $this.hasClass('selected') ? 'Remove from Cart' 
                                                : 'Add to Cart';
    return false;
});

Answer 2

您可以使用.text()方法来完成工作..

$('.checkout_icon a ').on('click', function(e) {
    e.preventDefault();
    var text = this.innerHTML; //  OR   $(this).text(); 
    var currText = 'Remove from Cart'
    if (text.indexOf('Remove') > -1) {
        currText = 'Add from Cart'
    }
    this.innerHTML = currtext;// OR   $(this).text(currText)
});​

检查小提琴

Answer 3

jsBin 演示

$('.checkout_icon a ').on('click', function(e) {
    e.preventDefault(); // prevent browser follow 'a' 
  
    $(this).text( $(this).hasClass('selected') ? 'Add to cart' : 'Remove from cart' );
    $(this).toggleClass('selected');     
});