3

可能なすべての組み合わせを試しましたが、それでもうまくいきません。1 番目、2 番目、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)使用します。

また、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

.findの代わりに使用する必要があり.filterます。

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

これはうまくいくはずです：

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

すでに設定されvisibility: hiddenている場合は、実際に設定する必要はありません。display: noneしかし、それは多かれ少なかれ何をするか.hide()です。

于 2013-02-16T22:52:30.023 に答える