堆栈内存溢出
  简体   繁体   English

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

[英]Why won't my Javascript functions work?

 原文  2010-08-26 18:06:51  3   5    php/ javascript/ jquery/ html

问题描述

I'm trying to edit this JQuery code to work with a PHP, but for some reason, the javascript is not working properly. 我正在尝试编辑此 JQuery代码以与PHP一起使用，但是由于某些原因，JavaScript无法正常工作。

This is the 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'})
}

Here is part of the PHP: 这是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>";
    }

Of course, the libraries are both included over the JS code I typed out here, and all the PHP arrays work as intended. 当然，这些库都包含在我在此处输入的JS代码上，并且所有PHP数组均按预期工作。

Here is the HTML output on a test run. 这是测试运行中的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>

5 个解决方案

解决方案1
 3 已采纳  2010-08-26 18:15:29

Is there a reason you're using inline handlers? 您使用内联处理程序是否有原因？

I'd get rid of those, and use jQuery to set the handlers. 我将摆脱它们，并使用jQuery设置处理程序。 

<li style='height: 20 px' number = '20'>...</li>

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

If the number is just the initial height, you could do this: 如果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'})
        });
    });
});

解决方案2
 1  2010-08-26 18:21:25

Since you defined those functions inside the document ready event handler, they're not in the global scope, and not accessible by the rest of the script. 由于您在文档就绪事件处理程序中定义了这些函数，因此它们不在全局范围内，并且其余脚本无法访问。 Move those function definitions to the "top level" of the script. 将那些功能定义移到脚本的“顶层”。

Your functions may not be bound to the right context ( this ) when they are being executed. 您的函数在执行时可能未绑定到正确的上下文（ this ）。 Try passing the element as an argument. 尝试将元素作为参数传递。 

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

And then change in your PHP script: 然后更改您的PHP脚本： 

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

to: 至： 

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

解决方案3
 1  2010-08-26 18:44:38

Your functions aren't defined in the global scope, so your <li> elements have no function to call. 您的函数未在全局范围内定义，因此您的<li>元素没有要调用的函数。 By putting them in the $(document).ready load function, sel and desel are only defined in that scope, so once that function exists, nothing else has access to them anymore. 通过将它们放入$（document）.ready加载函数中，仅在该范围内定义sel和desel，因此一旦该函数存在，其他任何人都无法再访问它们。

Michael Grassman's solution will not fix the problem; 迈克尔·格拉斯曼（Michael Grassman）的解决方案无法解决问题。 defining sel and desel in the global scope won't address the root issue, which is your reference to $(this) in each function. 在全局范围内定义sel和desel不会解决根本问题，这是您在每个函数中对$（this）的引用。 You would need access to the event object, which isn't passed when onmouseover is defined as you've done it, or the element itself, which you aren't passing as an argument to sel or desel. 您将需要访问事件对象（该元素在您完成onmouseover定义时不会传递）或元素本身（您不会将其作为sel或desel的参数传递）。 You would need to define the handlers as onmouseover="sel(this,80)" (or whatever number it is), and define function sel(obj,x){ $(obj)... } instead. 您需要将处理程序定义为onmouseover =“ sel（this，80）”（或任何数字），然后定义函数sel（obj，x）{$（obj）...}。 Though it will work, don't do that. 虽然可以，但是不要那样做。 jQuery's event handling functions are a much better alternative. jQuery的事件处理功能是更好的选择。

Patrick dw's solution will work. Patrick dw的解决方案将起作用。 Since your page content is not dynamic (ie the <li> elements never change), you can do this: 由于您的页面内容不是动态的（即<li>元素永远不会改变），您可以这样做：

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

I used height:'auto' in the mouseenter above because it looks like you are attempting to restore the height; 我在上面的mouseenter中使用了height：'auto'，因为它看起来像您正在尝试恢复高度； using 'auto' dynamically recalculates full height. 使用“自动”动态重新计算全高。 If you want to use a height you set, try using an expando property or the jQuery.data functions to store the desired height on your <li>s. 如果要使用设置的高度，请尝试使用expando属性或jQuery.data函数将所需的高度存储在<li>上。

解决方案4
 0  2010-08-26 18:11:19

Not sure why you are adding the document.ready. 不知道为什么要添加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'})
}

should work fine since your onmouseovers and onmouseout are calling the functions. 应该可以正常工作，因为您的onmouseovers和onmouseout正在调用函数。

Document.ready runs code on document loaded. Document.ready在加载的文档上运行代码。

解决方案5
 0  2010-08-26 18:38:37

The document.ready really isn't a problem here. 在这里，document.ready确实不是问题。 I think you should use jquery all the way and not define the function calls in your li's if you can. 我认为您应该一直使用jquery，并且如果可以的话，不要在li的函数中定义函数调用。 This ended up working for me: 最终为我工作： 

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

Which will apply the effect to all li's on the page. 这会将效果应用于页面上的所有li。 You can alter the selector to get more specific or have various heights defined, etc. 您可以更改选择器以使其更具体或定义各种高度等。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当我的html标记来自我的php脚本时，为什么我的javascript函数不起作用 - Why is my javascript functions won't work when my html tags is from my php script 为什么这个JavaScript无法运作？ - Why won't this javascript work? 为什么grep函数在localhost上不起作用？ - Why won't grep functions work on localhost? Javascript 无法与我的表单一起正常工作 - Javascript won't work properly with my form 为什么此javascript无法正常工作？ - Why does this javascript won't work? 为什么我的Ajax无法异步工作 - why won't my ajax work asynchronously 为什么我的职能不包括工作？ - Why won't my function include work? 为什么我的输入不起作用？ - Why won't my input work? 为什么我的fputcsv无法工作？ - Why won't my fputcsv work? 为什么我的foreach不工作？ - Why won't my foreach work?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM