3

我已经尝试了我能找到的所有可能的组合，但它仍然不起作用。我正在尝试选择第一、第二、第三...图像并更改 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

对不起，伙计们，少了一个分号。谢谢大家的帮助！

4

4 回答 4

10

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

如果没有空格，它会寻找第一个元素#slider，而不是.#slider

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

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

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

于 2013-02-16T22:50:52.673 回答
2

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

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

或者

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

该visibility属性在这里是不必要的，因为您已经用display: none...隐藏了元素

于 2013-02-16T22:50:42.380 回答
1

这应该有效：

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

真的没有必要设置visibility: hidden一次display: none已经设置。但这或多或少是.hide()这样做的。

于 2013-02-16T22:52:30.023 回答
1

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

.find('img').css("display","none");
于 2016-08-19T13:55:39.683 回答