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

你不需要 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