Jquery不起作用，但我想一切都好

Jquery dont work but i guess everything is ok

本文关键字：一切都好 不起作用 Jquery      更新时间：2023-09-26

我有这段代码，用来做一个基本的幻灯片

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function Slider()
        {
            $(".slider#1").show("fade",500);
        }
    </script>

比我有这个div:

   <div class="slider">
        <img id="1" src="images/pic1.jpg" border="0" alt="Image"/>
        <img id="2" src="images/pic1.jpg" border="0" alt="Image"/>
        <img id="3" src="images/pic1.jpg" border="0" alt="Image"/>
     </div>

我在body中也有onload，以便在body加载时执行jquery功能：

<body onload="Slider()">

但什么都没发生，会发生什么错误？

CSS ID不能以数字开头

您不能用数字来启动CSS ID，请参阅此处：http://css-tricks.com/ids-cannot-start-with-a-number/

您正在选择子元素

您正在选择.slider的子元素，因此需要.slider #i1，请参见此处：http://api.jquery.com/descendant-selector/

$（文档）就绪

最好使用$(document).ready(function(){});而不是<body onload="Slider()">，请参阅此处：onload（）和$.ready之间的区别？

您的代码

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    function Slider()
    {
        $(".slider #i1").show("fade",500);
    }
    $(document).ready(function(){
        Slider();
    });
</script>
<div class="slider">
     <img id="i1" src="images/pic1.jpg" border="0" alt="Image"/>
     <img id="i2" src="images/pic1.jpg" border="0" alt="Image"/>
     <img id="i3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>

尝试$(".slider #1").show("fade",500);

因此，在.slider和#1之间现在有一个空格，意思是：在中查找id为'1'的元素，这就是您想要的类"slider"的元素。你所拥有的是：寻找一个id为'id'和类滑块的元素。

修复错误

选择器中存在错误。你需要在类和id之间留一个空格。正如Copy Devil在他的回答中所说，你不能以数字开头css id，所以…

$(".slider #i1").show("fade",500);

良好做法

与其在你的身体上添加一个onload标签，不如这样做。

$(document).ready(function(){
    $(".slider #i1").show("fade",500);
});

这被称为不引人注目的javascript。它避免了将HTML和javascript混合在一起。

只是缺少了空格。正如其他人之前回答的那样，

".slider#1"
//something that has class=slider AND id=1

与

".slider #1"
//something that has id=1 and IS INSIDE OF something with class=slider

其他人建议$（document）.ready，但body onload就可以了，你不必更改它。（不过他们的方式更好。）

相关文章：