Question

我有这个代码，做一个基本的幻灯片放映

   <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>

当身体加载时，我还有身体上的onload来做jquery函数：

<body onload="Slider()">

但没有任何反应，错误是什么？

Answer 1

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()">，请参阅此处：Difference between onload() and $.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>

Answer 2

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

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

Answer 3

修复错误

选择器出错。你需要在类和id之间留一个空格。也像Copy Devil在他的回答中所说，你不能用一个数字开始一个css id，所以......

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

良好做法

不是在你的身体上添加一个onload标签，而是将其作为一种良好的做法。

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

这称为unobtrusive javascript。它避免了将HTML和JavaScript混合在一起。

Answer 4

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

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

VS

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

其他人建议$（文件）.ready但是身体onload会做，你不必改变它。（但是他们的方式更好。）

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

4 个答案:

CSS ID不能以数字

您正在选择子元素

$（文件）。就绪

您的代码