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

  });
});

DEMO： 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);
    }
  });
});

这是working example。

在click事件上切换存储在data属性中的文本

4 个答案: