Question

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

我让它在点击工作，但我不能让它切换回来。我的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而是必须为我想要使用它的每个元素编写单独的脚本，而是使用数据属性来确定新文本。数据属性方法是一种好方法吗？

Answer 1

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

jsFiddle example （稍微better example以显示它如何在多个元素上运行）

Answer 2

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

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

JS Fiddle

使用jQuery单击切换跨度文本

2 个答案: