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

不知道怎麼了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 2

，因爲你是一個嵌套的內部<a>另外，導致像<a href="#" id="#showMore"><a href="">After</a></a>

你應該只使用$(this).text('After')和之前一樣

我想你想使用replaceWith()這在這種情況下效率不高，因爲只有文本發生了變化。

++在其他答案中發現的切換錯誤。對他們的榮譽;-)

Answer 3

要綁定一個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 4

攪拌機有相應的答案，但我們也可以推廣你的問題變成一個簡單的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 5

點擊後切換的簡單解決方案：

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

Answer 6

這是同一個答案的簡化/「更緊湊」版本："A simple solution for toggling after a click"。

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

當然這需要jQuery插件才能工作。

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