Question

为什么这不起作用？

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

这是相同答案的缩小/“更紧凑”版本："A simple solution for toggling after a click"。

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

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

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 example of toggle()

Answer 6

因为您将<a>嵌套在另一个内部，导致类似<a href="#" id="#showMore"><a href="">After</a></a>

你应该只使用$(this).text('After')和之前的

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

++其他答案中发现的切换错误。感谢他们; - ）

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

jQuery - 切换.html文本？

7 个答案: