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

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

Answer 2

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

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

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

Answer 4

这是此处相同答案的简化版本/“更紧凑”版本：“单击后切换的简单解决方案”。

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

当然，这需要jQuery插件才能起作用。