jQuery - 切换 .html 文本？

Question

为什么这个不起作用？

http://jsfiddle.net/PdwJ6/

HTML

<a href="#" id="showMore">Before</a>

JS

$('#showMore').click(function() {

$(this).toggle(
function () {
    $(this).html('<a href="#">After</a>');},
function () {
    $(this).html('<a href="#">Before</a>');
});
});

- Yammi

Answer 1

Blender已经给出了正确的答案，但我们也可以将你的问题概括为一个简单的jQuery插件：

$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

你的代码将会是这样：

$('#showMore').click(function(){
  $(this).toggleText('Before', 'After');
})

- curiouscode

---

发现它很有用，与其他答案不同。 - Hamza Dhamiya

根据 OP 尝试做的意图，这应该是被接受的答案。（很抱歉让大家翻起了两年前的帖子） - Aaron Wagner

Answer 2

点击后切换的简单解决方案：

$('#showMore').on('click', function(){
    $(this).html() == "after" ? $(this).html('before') : $(this).html('after');
});

- user3009486

---

应该使用 === 而不是 ==。 - Nguyễn Xuân Hoàng

为什么要让它变长 $(this).html(($(this).html() == "after") ? 'before' : 'after') - jave.web

Answer 3

JsFiddle.net出了什么问题，但我无法发布演示。

你在嵌套两个函数(.click()和.toggle())，而.toggle()处理一个click，这可能会导致冲突。此外，使用text()代替html()：

HTML：

<a href="#" id="showMore">Before</a>

JavaScript:

$('#showMore').toggle(function() {
    $(this).text('Before');
}, function() {
    $(this).text('After');
});

- Blender

---

这个方法签名已经在jQuery 1.8中被弃用，并在jQuery 1.9中删除。现在它只是将被单击的对象动画移出视线。 - gl03

Answer 4

这是同样答案的简化/“更紧凑”版本: "单击后切换的简单解决方案"的翻译。请注意，保留了HTML标记。

$('#showMore').on('click', function(){
    $(this).html($(this).html() == 'after' ? 'before' : 'after');
});

当然，这需要jQuery插件才能正常工作。

- tarsacq

---

这段代码可能有效，但作为答案却很差，因为没有描述它的功能、如何回答问题或者为什么问题中的代码无法工作。 - AdrianHHH

请在你的代码中添加一些解释，使其成为一个完整的答案。 - kolossus

Answer 5

您正在将click绑定到<a/>上，然后在其中绑定toggle()。

如果您只想切换，可以省略click()。

$('#showMore').toggle(
    function() {
       $(this).html('<a href="#">After</a>');
    }, 
    function() {
       $(this).html('<a href="#">Before</a>');
});

话虽如此，但您将<a/>放置在另一个<a/>内部，这真的是您想要的吗？还是您只想替换.text()？.text("Before")

Jsfiddle示例：toggle()

- Mark Coleman

Answer 6

因为你把一个<a>标签嵌套在另一个里面，导致像这样的结果：<a href="#" id="#showMore"><a href="">After</a></a>

你应该只是使用$(this).text('After')来替换文本，Before同理

我猜你想使用replaceWith()，但在这种情况下效率不高，因为只有文本发生了变化。

++ 在其他答案中发现切换错误。向他们致敬 ;-)

- Capsule

Answer 7

jQuery.fn.extend({
    toggleText: function (a, b){
        var that = this;
            if (that.text() != a && that.text() != b){
                that.text(a);
            }
            else
            if (that.text() == a){
                that.text(b);
            }
            else
            if (that.text() == b){
                that.text(a);
            }
        return this;
    }
});

使用方法：

$("#YourElementId").toggleText('After', 'Before');

- Diego Favero