0

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

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

http://jsfiddle.net/PmV6x/

谢谢

4

5 回答 5

1

用这个：

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

jsfiddle

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

于 2013-06-08T05:59:23.693 回答
0

尝试将您的代码封装在此：

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

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

于 2013-06-08T06:00:56.377 回答
0

你想在里面添加你的代码

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

});

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

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

于 2013-06-08T06:04:22.807 回答
0
  • 不要忘记将 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>
于 2013-06-08T06:10:14.567 回答
0

确保您已首先将 jquery 引用添加到您的页面，并将一些内容添加到您的 menuitem 跨度并将 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(){
});
于 2013-06-08T06:12:43.570 回答