jquery - クリック イベントのデータ属性に格納されたテキストを切り替えます

Question

だから私はデータ属性に格納された文字列を切り替えるためにボタンのテキストを取得しようとしています:

<button class="toggleButton6 book1" data-starttext="Starting Text" data secondtext="Toggled Text">Starting Text</button>

これまでのところ、最初のクリック イベントに対してのみテキストを変更できます。無制限のクリック イベントでテキストを前後に切り替えるには、何かを追加する必要があります。

$(document).ready(function(){
  $('.book1').on('click', function(){
    var textVariable = $(this).data("secondtext");
    $(this).text(textVariable);
  });
});

http://codepen.io/nigelNSF/pen/Dfpak

Answer 1

as があるので2つのデータは必要ないので、firsttext以下button.text()のようにhtmlを変更して1つのデータだけにします。toggletext

<button class="toggleButton6 book1" data-toggletext="Toggled Text" >Starting Text</button>

そして、以下のようにスクリプトでtoggletextとの値を切り替えます。button.text()

$(document).ready(function(){
  $('.book1').on('click', function(){
        var textVariable = $(this).data("toggletext");          
        $(this).data('toggletext', $(this).text()).text(textVariable);

  });
});

デモ: http://codepen.io/seraphzz/full/IJLBi

Answer 2

他の誰もが言うように、テキスト フィールドの値と比較するstarttextか、それsecondtextに応じてテキスト フィールドの値を明示的に設定して、テキストの状態を確認する必要があります。

$(document).ready(function(){
  $('.book1').on('click', function(){
    var second = $(this).data("secondtext");
    var start = $(this).data("starttext");
    if (second === $(this).text()) {
      $(this).text(start);
    } else {
      $(this).text(second);
    }
  });
});

これが実際の例です。

Answer 3

これを試して：

$(document).ready(function(){
  $('.book1').on('click', function(){
      var textVariable = $(this).data("secondtext");
      var temp = $(this).text();
      $(this).text(textVariable).data("secondtext", temp);
  });
});

Answer 4

$(document).ready(function(){
  $('.book1').on('click', function(){
    if ($(this).text() == $(this).attr('data-starttext'))
        $(this).text($(this).attr('data-secondtext'));
    else 
        $(this).text($(this).attr('data-starttext'));
  });
});