Question

我正在尝试编辑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>

Answer 1

您是否有使用内联处理程序的原因？

我将摆脱这些，并使用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'})
    });
});

如果number只是初始高度，您可以这样做：

$(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'})
        });
    });
});

Answer 2

由于您在文档就绪事件处理程序中定义了这些函数，因此它们不在全局范围内，并且不能由脚本的其余部分访问。将这些函数定义移动到脚本的“顶级”。

您的函数在执行时可能不会绑定到正确的上下文（this）。尝试将元素作为参数传递。

function sel(x, elem){
    $(elem).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
}
function desel(elem){
    $(elem).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
}

然后更改PHP脚本：

onmouseover='sel($aux);' onmouseout='desel();

为：

onmouseover='sel($aux, this);' onmouseout='desel(this);'>

Answer 3

您的功能未在全球范围内定义，因此您的＆lt; li＆gt;元素没有调用功能。通过将它们放在$（document）.ready load函数中，sel和desel只在该范围内定义，所以一旦该函数存在，就不再有其他任何东西可以访问它们了。

迈克尔格拉斯曼的解决方案无法解决问题;在全局范围内定义sel和desel不会解决根问题，即每个函数中对$（this）的引用。您需要访问事件对象，当onmouseover被定义为您已经完成时，它不会被传递，或者元素本身，您不会将其作为参数传递给sel或desel。您需要将处理程序定义为onmouseover =“sel（this，80）”（或它的任何数字），并定义函数sel（obj，x）{$（obj）...}。虽然它会起作用，但不要这样做。 jQuery的事件处理函数是一个更好的选择。

Patrick dw的解决方案将起作用。由于您的网页内容不是动态的（即＆lt; li＆gt;元素永远不会改变），您可以这样做：

$(document).ready(function() { $('li').hover( function(){ $(this).stop().animate({height:'auto'},{queue:false, duration:600, easing: 'easeOutBounce'}) }, function(){ $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'}) } ); });

我在上面的鼠标中使用了高度：'auto'，因为看起来你正试图恢复高度;使用'auto'动态重新计算全高。如果您想使用您设置的高度，请尝试使用expando属性或jQuery.data函数在＆lt; li＆gt; s上存储所需的高度。

Answer 4

不确定为什么要添加document.ready。

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'})
}

应该正常工作，因为你的onmouseovers和onmouseout正在调用函数。

Document.ready在加载的文档上运行代码。

Answer 5

该文件。这里确实不是问题。我认为你应该一直使用jquery，如果可以的话，不要在你的li中定义函数调用。这最终为我工作：

        $(function(){
            $('body ul li').hover(function(){
    var newheight = (Number($(this).css('height').replace('px',''))*5)+'px';
                $(this).stop().animate({
                    height: newheight
                }, {
                    queue: false,
                    duration: 600,
                    easing: 'easeOutBounce'
                });
            }, function(){
                $(this).stop().animate({
                    height: '50px'
                }, {
                    queue: false,
                    duration: 600,
                    easing: 'easeOutBounce'
                });
            });
        });

将效果应用于页面上的所有li。您可以更改选择器以获得更具体的定义或定义各种高度等。

为什么我的Javascript函数不起作用？

5 个答案: