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 个数据，因为您有firsttextas 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

试试这个：

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

Answer 3

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

Answer 4

正如其他人所说：您必须通过将其与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);
    }
  });
});

这是一个工作示例。