jQuery - 切换 .html 文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5584010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Toggle .html text?
提问by Yammi
Why won't this work?
为什么这行不通？
HTML
HTML
<a href="#" id="showMore">Before</a>
JS
JS
$('#showMore').click(function() {
$(this).toggle(
function () {
$(this).html('<a href="#">After</a>');},
function () {
$(this).html('<a href="#">Before</a>');
});
});
回答by curiouscode
Blender has the appropriate answer, but we can also generalize your question into a simple jQuery plugin:
Blender 有适当的答案，但我们也可以将您的问题概括为一个简单的 jQuery 插件：
$.fn.toggleText = function(t1, t2){
if (this.text() == t1) this.text(t2);
else this.text(t1);
return this;
};
Your code would then look like:
您的代码将如下所示：
$('#showMore').click(function(){
$(this).toggleText('Before', 'After');
})
回答by user3009486
A simple solution for toggling after a click:
单击后切换的简单解决方案：
$('#showMore').on('click', function(){
$(this).html() == "after" ? $(this).html('before') : $(this).html('after');
});
回答by Blender
Not sure what's up with JsFiddle.net, but I can't post a demo.
不知道 JsFiddle.net 是怎么回事，但我不能发布演示。
You're nesting two functions within each other (.click()and .toggle()), and .toggle()handles a click, so that might be causing conflict. Also, use text()instead of html():
您将两个函数相互嵌套（.click()和.toggle()），并.toggle()处理 a click，因此这可能会导致冲突。另外，使用text()代替html()：
HTML:
HTML:
<a href="#" id="showMore">Before</a>
JavaScript:
JavaScript:
$('#showMore').toggle(function() {
$(this).text('Before');
}, function() {
$(this).text('After');
});
回答by tarsacq
This is a reduced / "more compact" version of the same answer here: "A simple solution for toggling after a click".
这是此处相同答案的简化/“更紧凑”版本：“单击后切换的简单解决方案”。
$('#showMore').on('click', function(){
$(this).html($(this).html() == 'after' ? 'before' : 'after');
});
Of course this needs jQuery plugin for it to work.
当然，这需要 jQuery 插件才能工作。
回答by Mark Coleman
You are binding a clickto the <a/>and than inside of that you are binding a toggle()to it.
您将 a 绑定click到了，<a/>而不是在里面绑定了 atoggle()到它。
If you simply want to toggle you can leave off the click().
如果您只是想切换，则可以不使用click().
$('#showMore').toggle(
function() {
$(this).html('<a href="#">After</a>');
},
function() {
$(this).html('<a href="#">Before</a>');
});
With that being said you are placing an <a/>inside of another <a/>Is that really what you want? Or you you just want to replace the .text()? .text("Before")
话虽如此，您正在将一个<a/>内部放入另一个<a/>真的是您想要的吗？或者你只是想更换.text()？.text("Before")
回答by Capsule
because you are nesting a <a>inside another, resulting in something like <a href="#" id="#showMore"><a href="">After</a></a>
因为你<a>在另一个内部嵌套一个，导致类似<a href="#" id="#showMore"><a href="">After</a></a>
You should just use $(this).text('After')and same with Before
你应该只使用$(this).text('After')和之前一样
I guess you wanted to use replaceWith()which is not very efficient in this situation because only the text changes.
我猜你想使用replaceWith()which 在这种情况下效率不高，因为只有文本发生了变化。
++ the toggle bug spotted in the other answers. Kudos to them ;-)
++ 在其他答案中发现的切换错误。向他们致敬;-)
回答by Diego Favero
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;
}
});
Use as:
用于：
$("#YourElementId").toggleText('After', 'Before');
