使用 jQuery 在单击时切换跨度文本答案

【问题标题】：Toggle span text on click with jQuery使用 jQuery 在单击时切换跨度文本
【发布时间】：2014-03-12 17:18:25
【问题描述】：

我正在尝试编写一个可重用的脚本，用于在点击时切换元素的文本。

我让它在点击时工作，但我无法让它切换回来。我的 if 语句有问题吗？

<span class="js-textEdit" data-text="Show less">Show more</span>


$('.js-textEdit').click(function() {
  var oldText = $(this).text();
  var newText = $(this).attr('data-text');

  if ($(this).text(oldText)) {
    $(this).text(newText);
  } else {
    $(this).text(oldText);
  }
});

这是JSFIddle

另外，有没有更简洁的方法来重构它？我使用数据属性来确定新文本，而不是使用 ID 并且必须为要使用它的每个元素编写单独的脚本。数据属性方法是不是好方法？

【问题讨论】：

当您第二次单击按钮时，旧文本是当前在其中的内容，使用数据将当前文本绑定到元素。 api.jquery.com/jQuery.data
Button text toggle in jquery 的可能副本。

标签： javascript jquery

【解决方案1】：

$('.js-textEdit').click(function () {
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $(this).text(newText).data('text',oldText);
});

jsFiddle example（还有一点better example 以显示它如何在多个元素上工作）

【讨论】：

@Moppy - 我的方法必须聪明吗？呃，你从来没有提到你想让它也很聪明；）
嗯，这确实是我的方法。我们不要在这里得意忘形。你所做的只是移动一些东西:)

【解决方案2】：

您必须将数据集设置为旧文本。

   $(this).attr('data-text',oldText);

JS Fiddle

【讨论】：