为什么 html 元素文本不能替换？答案

【问题标题】：Why html-element text doesn't replace?为什么 html 元素文本不能替换？
【发布时间】：2014-02-27 19:49:56
【问题描述】：

我使用 javascript (jQuery) 来切换 html-element (span) 的文本：

function TextToogle(element, text) {
   if (element.html() == '-' + text) {
       element.html(text.replace(element.html(), '+' + text));
   }
   else {
       element.html(text.replace(element.html(), '-' + text));
   }
}

我为我的函数提供了两个参数： 1) 元素 - html 对象 2) text - span的默认文本

我的目标是将跨度文本从“+text”切换到“-text”，反之亦然。

但是脚本不能正常工作。当函数将文本切换为“+文本”时，结果我看到“文本”。切换到“-text”可以正常工作。

【问题讨论】：

你能创建一个小提琴：jsfiddle.net吗？
你把一个简单的问题弄得很复杂
处理文本.. 非常不可靠的方法。
Rahul Desai，是的，我可以。我会在 5 分钟后附上链接。
dfsq，有什么更好的方法来解决我的任务？

标签： javascript jquery html

【解决方案1】：

我只是在回调中替换，看起来简单多了

element.text(function(_, txt) {
    return txt.replace(/[+-]/g, function(x) {
        return x == '+' ? '-' : '+';
    });
});

FIDDLE

【讨论】：

【解决方案2】：

基于你是比较（element.html() == '-' + text）你的功能可以更简单。你不需要text.replace(element.html(), '+' + text) 部分：

function TextToogle(element, text) {
   if (element.text() == '-' + text) {
       element.text('+' + text);
   }
   else {
       element.text('-' + text);
   }
}

但是依靠文本比较并不理想。我会使用不依赖于文本的 CSS：

$('.text-toggle').click(function() {
    $(this).toggleClass('active');
});

CSS

.text-toggle:before {
    content: '+';
}
.text-toggle.active:before {
    content: '-';
}

这里有一个明显的优势，您可以轻松地设置 +/- 样式，您可以设置背景图像、更改字体大小等。虽然您无法使用原始方法来做到这一点。

演示：http://jsfiddle.net/dfsq/mvj5c/

【讨论】：

你是第一个。谢谢。

【解决方案3】：

function toggleText(text) {
    return {'-':'+', '+':'-'}[text[0]]+text.slice(1);
}

element.html(toggleText(element.html()));

【讨论】：

【解决方案4】：

查看简单示例。

您已发送短信-abc。现在两次检查都失败了。

为什么不这样做

function TextToogle(element, text) {
   var check = text.splice(0, 1);
   if (check === "-") {
       element.html("+" + text.substring(1, text.length));
   }
   else {
       element.html("-" + text.substring(1, text.length));
   }
}

【讨论】：

【解决方案5】：

试试这个代码

$('span').click(function(){
  var 
     $this = $(this),
     thisText = $this.text();
  $this.text($this.text() === "-" + thisText ? ("+" + thisText) : ("-" + thisText));

});

【讨论】：