私はここ数時間、これで壁に頭をぶつけてきました-運がありません。つまり、next()jQueryメソッドから目的の機能を取得できないようです。画像をクリックすると、DOMの次のimgタグが表示されるようにしようとしています。
$(images).each(function(i){
$('#images').append($(this).css({
'display':(i) ? 'none' : 'in-line'
}).click(function(){
$(this).next().css({'display':'in-line'});
$(this).css({'display':'none'});
}));
});
必要な画像は消えますが、「next()」の画像は表示されません。大きなアイデアは何ですか?環境は次のとおりです。
<div id="images">
<img src="imgs/1.jpg" style="width: 333.33333333333337px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666669px; display: none; ">
<img src="imgs/2.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/3.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/4.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/7.jpg" style="width: 500px; height: 333.3333333333333px; position: absolute; top: 50%; left: 50%; margin-top: -166.66666666666666px; margin-left: -250px; display: none; ">
</div>
これは、これらの要素がjQueryを介して動的に作成されるという事実と関係がありますか?動的に作成された要素の反復は、画像が読み込まれた後にのみ開始されることに注意してください。
ありがとう。