无法找到我想要实现的目标的明确答案。我确信它很简单,但我很想念它。
我将在页面上构建一个链接列表,这些链接都具有“prettyLink”类,每个链接都有一个标题。在鼠标悬停时我试图将该标题存储在变量中并删除标题,然后在mouseout上用存储的内容替换该标题。 (基本上将鼠标移除时将其移除并将其放回原处)
这是代码:
$('a.prettyLink').mouseover(function() {
var oldTitle = this.title;
$(this).removeAttr('title');
}).mouseout(function() {
$(this).attr('title',oldTitle);
});
感谢任何帮助。谢谢!
答案 0 :(得分:6)
只需在mouseover()
方法之外声明变量:
var oldTitle;
$('a.prettyLink').mouseover(function() {
oldTitle = this.title;
$(this).removeAttr('title');
}).mouseout(function() {
$(this).attr('title',oldTitle);
});
在方法之外声明变量允许在方法中分配变量的值,并使新值在其他地方可用。
答案 1 :(得分:3)
您需要将oldTitle
保存在本地范围之外。我喜欢使用jQuery的.data()
方法。
$('a.prettyLink').mouseover(function() {
$(this).data('oldTitle', this.title);
$(this).removeAttr('title');
}).mouseout(function() {
$(this).attr('title',$(this).data('oldTitle'));
});
答案 2 :(得分:2)
var oldTitle;
$('a.prettyLink').mouseover(function() {
oldTitle = this.title;
$(this).removeAttr('title');
}).mouseout(function() {
$(this).attr('title',oldTitle);
});
应该工作。
答案 3 :(得分:1)
您可以使用jQuery.data存储信息并稍后检索
答案 4 :(得分:1)
如果你使用hover
事件会更好:
var oldTitle;
$('a.prettyLink').hover(function() {
oldTitle = this.title;
$(this).removeAttr('title');
},function() {
$(this).attr('title',oldTitle);
});
那是因为mouseover
触发多次,hover
只有一次进入(相当于mousenter
)
希望这会有所帮助。干杯
答案 5 :(得分:0)
您可以尝试在页面上放置一个隐藏的<span id="title"></span>
,它将保存该变量,而您始终只是设置/从该范围获取。
然后使用您的代码:
$('a.prettyLink').mouseover(function() {
var oldTitle = this.title;
$('#title').val(oldTitle);
$(this).removeAttr('title');
}).mouseout(function() {
$(this).attr('title',$('#title').val());
});
另一种方法是将oldTitle声明为页面中的全局并以这种方式使用它。
答案 6 :(得分:0)
考虑使用data()
:http://api.jquery.com/jQuery.data/
这具有将值与事件绑定的元素一起存储的优点,而声明的全局变量可能会被来自执行相同操作的其他元素的事件覆盖。
答案 7 :(得分:0)
这是我的溶剂
$(".swap").mouseover(function () {
var $img = $(this).find('img');
$(this).data('oldSrc', $img.attr('src'));
$img.attr("src", $img.data('alt-src'));
}).mouseout(function () {
var $img = $(this).find('img');
$img.attr("src", $(this).data('oldSrc'));
});
<div class='swap'><img src='mysrc' data-alt-src='new_src'/></div>