使用jQuery,我试图在悬停时用这些链接替换文本,包括span。然后,当用户将鼠标悬停时,将再次显示原始文本。
<a class="btn" href="#">
<img src="#" alt=""/>
<span>Replace me</span> please
</a>
<a class="btn" href="#">
<img src="#" alt=""/>
<span>Replace me</span> please
</a>
最终输出应为
<a class="btn" href="#">
<img src="#" alt=""/>
I'm replaced!
</a>
我正在四处寻找,但不知道如何更换它。有什么想法吗?
$('.btn').hover(function(){
$(this).text("I'm replaced!");
});
答案 0 :(得分:23)
$('.btn').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('defaultText', $this.text());
$this.text("I'm replaced!");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('defaultText'));
}
);
您可以将原始文本保存在节点本身存储的data-defaultText
属性中,以避免变量
答案 1 :(得分:4)
这应该可以解决问题
$(function(){
var prev;
$('.btn').hover(function(){
prev = $(this).text();
$(this).text("I'm replaced!");
}, function(){
$(this).text(prev)
});
})
答案 2 :(得分:1)
$('.btn').hover(function() {
// store $(this).text() in a variable
$(this).text("I'm replaced!");
},
function() {
// assign it back here
});
答案 3 :(得分:1)
将另一个函数添加到悬停事件中,如下所示:
$('.btn').hover(function(){
$(this).text("I'm replaced!");
}, function() {
$(this).text("Replace me please");
});
Link用于演示
答案 4 :(得分:0)
您需要将其存储在变量中才能将其设置回原来的状态,请尝试:
var text;
$(".btn").hover(function () {
text = $(this).text();
$(this).text("I'm replaced!");
},
function () {
$(this).text(text);
});