jquery - div要素内のJqueryスイッチテキスト

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