Question

我的这段代码在jsfiddle中运行正常但在浏览器中运行不正常。任何人都可以帮助我吗？

$(".menuitem").hover(function() {
$(this).children("span").fadeIn();
}, function() {
$(this).children("span").fadeOut();
});

http://jsfiddle.net/PmV6x/

由于

Answer 1

使用此：

$(document).ready(function(){
    $(".menuitem").hover(function () {
        $(this).children("span").fadeIn();
    }, function () {
        $(this).children("span").fadeOut();
    })
});

jsfiddle

问题是这些语句永远不会在您的代码中调用，它们会在实际DOM之前加载。此时您的代码找不到它正在查找的DOM元素，因此没有选择任何元素，也没有事件附加到任何元素。

Answer 2

尝试将代码封装在此：

$(document).ready(function(){
   //your code
});

jsfiddle 会自动将您的代码封装在$(document).ready()中。这就是它在那里工作的原因。

Answer 3

您想在

中添加代码

jQuery(document).ready(function(){  
 .
 . 

});

这个事件。所以当你的DOM准备就绪时，你的代码就会被执行。

还要确保添加jquery默认库文件，如jquery.js。

Answer 4

不要忘记将jQuery添加到您的页面。
不要忘记等待文件准备好。

<!doctype html>
<html>
    <head>
        <title>My jQuery Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            $(function () {
                $(".menuitem").hover(function() {
                    $(this).children("span").fadeIn();
                }, function() {
                    $(this).children("span").fadeOut();
                });
            });
        </script>
    </head>
    <body>

        <!-- YOUR HTML -->

    </body>
</html>

Answer 5

确保首先在页面中添加了jquery引用，并在menuitem spans中添加了一些内容，并在span中添加了style =“display：none”样式。您可能希望更改样式以正确显示显示范围。

<li class="menuitem"><span style="display:none">Your image 01</span>ITEM 01</li>
<li class="menuitem"><span style="display:none">Your image 02</span>ITEM 02</li>

并使用jQuery包装代码

$(document).ready(function(){
});

jquery没有在浏览器中执行

5 个答案: