jQuery - li元素上的悬停函数
[英]jQuery - Hover function on li element
问题描述
I have a list and I'm trying to change the text of the elements when the mouse is over them. 
我有一个列表，我试图在鼠标悬停时更改元素的文本。 For instance, if i have this list 例如，如果我有这个清单
<ul>
<li id="first-li">Some text</li>
<li id="second-li">More text</li>
<li id="third-li">and more text</li>
</ul>
and the mouse is over the first element, I want the text to change to, for instance, "1st element". 并且鼠标在第一个元素上，我希望文本更改为，例如，“1st element”。
I'm trying to achieve the above using this code: 我正在尝试使用此代码实现上述目的：
$(document).ready(function(){
//when mouse is over, save initial value and replace with newText
function hover_in(newText){
console.log(newText);
var $this = $(this);
$this.data('initialText', $this.text());
$this.text(newText);
}
//when mouse is over, replace with initial value
function hover_out(){
var $this = $(this);
$this.text($this.data('initialText'));
}
$('#first-li').hover(function(){hover_in("NEW TEXT")}, hover_out);
});
I can see the value insert in the arguments of hover_in ' "NEW TEXT" printed in the console but the text doesn't change. 我可以在控制台中打印的hover_in '“NEW TEXT”参数中看到值insert，但文本没有改变。
Any ideas what I'm doing wrong ? 我有什么想法我做错了吗？
Thanks in advance ! 提前致谢 ！
3 个解决方案
解决方案1
5 已采纳 2015-03-11 16:22:38
Your problem is that you are creating two functions trying to get the $(this) variable, only available in the hover function. 您的问题是您要创建两个试图获取$(this)变量的函数，该函数仅在hover函数中可用。
You have to pass $(this) as a variable for this functions. 您必须将$(this)作为此函数的变量传递。
$(document).ready(function(){
//when mouse is over, save initial value and replace with newText
function hover_in(newText, $this){
console.log(newText);
$this.data('initialText', $this.text());
$this.text(newText);
}
//when mouse is over, replace with initial value
function hover_out($this){
$this.text($this.data('initialText'));
}
$('li').hover(
function(){
hover_in("NEW TEXT", $(this));
},
function() {
hover_out($(this));
});
});
解决方案2
1 2015-03-11 16:27:06
Since you are calling hover_in from a function this is not referring to the jQuery element. 因为你从一个函数调用hover_in，所以这不是指jQuery元素。 You need to pass that in the function in order to refer to it. 您需要在函数中传递它才能引用它。
http://jsfiddle.net/whoacowboy/mguuknny/ http://jsfiddle.net/whoacowboy/mguuknny/
JavaScript JavaScript的
$(document).ready(function(){
//when mouse is over, save initial value and replace with newText
function hover_in(t,newText){
t.data('initialText', t.text());
t.html(newText);
}
//when mouse is over, replace with initial value
function hover_out(){
var $this = $(this);
$(this).html($(this).data('initialText'));
}
$('#list li').hover(function(){
hover_in($(this),"NEW TEXT");
}, hover_out);
});
html HTML
<ul id="list">
<li> First element </li>
<li> Second element </li>
</ul>
解决方案3
1 2015-03-11 16:30:05
<!DOCTYPE htmL> <html> <head> <title>Test</title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> </head> <body> <ul> <li id="first">First element</li> <li id="second">Second element</li> </ul> </body> <script> $(function() { var first_maximized = "First element"; var first_minimized = "1st element"; var second_maximized = "2nd element"; var second_minimized = "Second element"; $("#first").hover( function() { $("#first").text(first_minimized); }, function() { $("#first").text(first_maximized); } ); $("#second").hover ( function() { $("#second").text(second_maximized); }, function() { $("#second").text(second_minimized); } ); }); </script> </html>
Try this approach. 试试这种方法。
I used the JQuery method hover which takes two parameters in this case : 我使用了JQuery方法hover ，在这种情况下需要两个参数：
- First is the function when mouse in within the element 首先是鼠标在元素内的功能
- Second is the function whien mouse is out of the element 其次是whien鼠标不在元素中的功能
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.