Question

我使用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）element - html对象 2）文本 - 跨度的默认文本

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

但是脚本无法正常工作。当功能切换文本为“+ text”时，结果我看到“text”。切换到“-text”正常工作。

Answer 1

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

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

FIDDLE

Answer 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: '-';
}

这里有一个明显的优点是你可以轻松地设置你的+/-样式，你可以设置一个背景图像，chage字体大小等等。你可以用你原来的方法来做到这一点。

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

Answer 3

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

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

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

Answer 5

试试这段代码

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

});

为什么html元素文本不会替换？

5 个答案:

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