jquery将内容传递给$（this）.text

我正在制作一个菜单，在翻转时，链接的文本会发生变化（淡入）。 我只是从另一个线程复制并粘贴了一段代码

 function fade_new_text(){ $('#what').animate({'opacity': 0}, 500, function () { $(this).text('new text'); }).animate({'opacity': 1}, 500); } function revert(){ $('#what').animate({'opacity': 0}, 500, function () { $(this).text('do something'); }).animate({'opacity': 1}, 500); }  

然后在身体部分我有菜单本身

  Do something  

这适用于一个链接，但我需要创建其中的7个，并希望将来重用此代码。 所以我需要将链接ID和新文本传递给Jquery函数以获得6个其他链接，希望来自’onmouseover’和’onmouseout’，因为它最有意义吗？ 我是Jquery的新手，非常感谢您就如何做到这一点的建议。

测试文件位于http://www.voxcommunications.ca/test.html

Answer 1

使用布莱恩斯的答案，这种方式可以防止在不必要时重复出现动画，也可以动态添加数据鼠标，而不是在每个链接上的数据鼠标中重写链接文本。

这是一个有效的示例FIDDLE

HTML

 Do something
 Do something else
 Do something yet again
 Do something one last time
 

JQuery的

 //Add the link text dynamically $('.hoverlink').each(function() { $(this).data('mouseout', $(this).text()); }); //Perform hover function and prevent recurring animations $("body").on("mouseover mouseout", '.hoverlink', function(event) { var text = $(this).data(event.type); $(this).stop().animate({"opacity": 0}, 500, function() { $(this).stop().text(text).animate({"opacity": 1}, 500); }); }); 

Answer 2

与JofryHS的回答类似，您可以通过利用锚标记上的数据属性以及使用jQuery将多个事件绑定到同一个处理程序这一事实来简化操作。

HTML

 Do something Do something else 

JS：

 $(".hoverlink").bind("mouseover mouseout", function(e) { var elem = $(this); var text = elem.data(e.type); // e.type will have name of the current event elem.animate({"opacity": 0}, 500, function() { elem.text(text); }).animate({"opacity": 1}, 500); }); 

的jsfiddle

Answer 3

通常，这种类型的菜单将是样式无序列表（ul）元素，类似这样。

 
 
Do 1
 
Do 2
 
Do 3
 
Do 4
  

为了使标记尽可能简单，我们只对替代（鼠标hover）文本进行编码。

第一次访问每个链接时，jQuery确保保留原始文本的记录。

 $("#menu").on('mouseenter mouseleave', "a", function(e) { var $this = $(this); $this.stop(true).animate({'opacity': 0}, 500, function() { if(!$this.data('mouseout')) { $this.data('mouseout', $this.text()); } $this.text($this.data(e.type)); }).animate({'opacity': 1}, 500); }); 

DEMO

Answer 4

重用你的函数就像这样重写你的函数

然后在你的身体部分使用类似下面的一个

  Do something  Do something  ....so on...  

Answer 5

我可以这样建议：

 function fade_new_text(text){ $('#what').animate({'opacity': 0}, 500, function () { $(this).text(text); }).animate({'opacity': 1}, 500); } function revert(text){ $('#what').animate({'opacity': 0}, 500, function () { $(this).text(text); }).animate({'opacity': 1}, 500); } $(".coolLink").hover( function() { fade_new_text($(this).attr("data-text")); }, function() { revert($(this).attr("data-original")); } ); 

对HTML进行微小修改：

 Do something 

如果文本基本上在两个文本之间来回切换，这将起作用。 现在对于其他链接，只需使用相同的class="coolLink"与data-original和data-text ，你就可以了。

Answer 6

使用数据属性向HTML添加行为的路径将是我要去的方式，你可以这样做：

 link one link two link three 

–

 $('[data-fade-text]').each(function(){ var self = $(this); self.data('original-text', self.text()); }); $('[data-fade-text]').hover( function(){ var self = $(this); self.animate({'opacity': 0}, 500, function () { self.text(self.data('fade-text')); }).animate({'opacity': 1}, 500); }, function(){ var self = $(this); self.animate({'opacity': 0}, 500, function () { self.text(self.data('original-text')); }).animate({'opacity': 1}, 500); } );​ 

示例http://jsfiddle.net/fY5pj/