Question

我已经尝试过我能找到的所有可能的组合，但它仍然无效。我正在尝试选择第一个，第二个，第三个...图像并更改CSS属性。

JavaScript：

    $("#slider:eq(0)")filter(img).css("display","none");
    $("#slider:eq(0)")filter(img).css("visibility","hidden");

HTML：

    <div id  = "slider">
    <img id = "slider_img5" class = "slider_image" src = "img/slider_image_5.png" width = "1000px" height = "400px" alt = "slider_image_5">
    <img id = "slider_img4" class = "slider_image" src = "img/slider_image_4.png" width = "1000px" height = "400px" alt = "slider_image_4">
    <img id = "slider_img3" class = "slider_image" src = "img/slider_image_3.png" width = "1000px" height = "400px" alt = "slider_image_3">
    <img id = "slider_img2" class = "slider_image" src = "img/slider_image_2.png" width = "1000px" height = "400px" alt = "slider_image_2">
    <img id = "slider_img1" class = "slider_image" src = "img/slider_image_1.png" width = "1000px" height = "400px" alt = "slider_image_1">
    </div>

CSS：

#slider{
position : absolute;
height : 400px;
width : 100%;
border-radius : 3px;
-moz-border-radius : 3px;
box-shadow : 1px 1px 5px #bbbbbb;
-moz-box-shadow : 1px 1px 5px #bbbbbb;
}

.slider_image{
position : absolute;
top : 0px;
left : 0px;
border-radius : 3px;
-moz-border-radius : 3px;
}

#slider_img1 , #slider_img2 , #slider_img3 , #slider_img4{
visibility : hidden;
display : none;
}

我希望有人可以帮助我。

更新1

感谢您的所有答案，但没有一个有效。我正在调用文档准备好的函数，它肯定被调用（使用alert();测试）。我还预设了所有图像的样式，因此除了第一个图像外，它们都是隐藏的。

更新2

对不起伙计们，有一个分号丢失了。谢谢你的帮助！

Answer 1

#slider和:eq(0)之间需要一个空格。

没有空格，它正在寻找的元素#slider，而不是#slider的第一个后代。

但请注意，:eq是选择器的jQuery extension。为了获得更好的性能，您应该使用$('#slider img').eq(n)，允许尽可能快地解析整个（有效）CSS选择器，然后使用.eq获取所需的元素。

或者，请使用原生CSS :nth-child()语法，即#slider :nth-child(1)，但请注意，这使用从1开始而不是0的数字。

此外，您提供的filter(img)语法不正确。它应该被链接（即.filter）并且参数应该是有效的选择器，即'img'（带引号）。但是，如果您的真实HTML如图所示，则不需要过滤器，因为它是NoOp - 之前的函数调用只能返回图像。

Answer 2

好的，你可以用CSS做到这一点。据我所知，你想显示第一张图片，并隐藏其他图片？所以添加：

#slider_img5{
  visibility : visible;
  display : block;
}

或

#sider img:first-child{
  /* same... */
}

此处不需要visibility属性，因为您已经使用display: none隐藏了该元素...

Answer 3

这应该有效：

$('#slider img').eq(0).hide();

一旦设置了visibility: hidden，就没有必要设置display: none。但这或多或少是.hide()所做的。

Answer 4

应该使用.find而不是.filter。

.find('img').css("display","none");

jQuery eq（）选择器无法正常工作

4 个答案: