我正在尝试编辑this JQuery 代码可以与 PHP 一起使用，但由于某种原因，javascript 无法正常工作。
这是 JavaScript:
function sel(x){
$(this).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
}
function desel(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
}
这是 PHP 的一部分:
foreach($marcas as $mar){
foreach($modelos["$mar"] as $mod){
$tam["$mar"]=$tam["$mar"]+20;
}
foreach($marcas as $mar){
$aux=$tam["$mar"];
echo "<li style='height: $aux px' onmouseover='sel($aux);' onmouseout='desel();'> <p>$mar</p>";
foreach($modelos["$mar"] as $mod){
echo "<p class='subtext'>$mod</p>";
}
echo"<br/></li>";
}
当然，这些库都包含在我在这里输入的 JS 代码中，并且所有 PHP 数组都按预期工作。
这是测试运行时的 HTML 输出。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smooth Animated jQuery Menu</title>
<link rel="stylesheet" href="animated-menu.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
function sel(x){
$(this).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
}
function desel(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
}
</script>
</head>
<body>
<ul>
<li style='height: 80 px' onmouseover='sel(80);' onmouseout='desel();'>
<p>VolksWagen</p>
<p class='subtext'>Bora</p>
<p class='subtext'>Beetle</p>
<p class='subtext'>Jetta</p>
<p class='subtext'>New Beetle</p>
<br/>
</li>
<li style='height: 20 px' onmouseover='sel(20);' onmouseout='desel();'>
<p>Jeep</p>
<p class='subtext'>Cherokee</p>
<br/>
</li>
<li style='height: 20 px' onmouseover='sel(20);' onmouseout='desel();'>
<p>Dodge</p>
<p class='subtext'>Ram 3500</p>
<br/>
</li>
</ul>
</body>
</html>
最佳答案
您使用内联处理程序有什么原因吗？
我会摆脱这些，并使用 jQuery 来设置处理程序。
<li style='height: 20 px' number = '20'>...</li>
jQuery
$(document).ready(function() {
$('li').hover( function() {
var x = $(this).attr('number');
$(this).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
},
function() {
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
如果数字只是初始高度，您可以这样做:
$(document).ready(function() {
$('li').each(function() {
// Get int value of inline "height" property
var x = parseInt(this.style.height);
$(this).hover( function() {
$(this).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
},
function() {
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
});
关于php - 为什么我的 Javascript 函数无法运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3578066/