2

私の目標は、ユーザーが背景を選択できるようにすることですが、私のjsは機能しません。

<div class="step">
</div>

<div id="images">
  <img src="" data-src="">
  <img src="" data-src="">
  <img src="" data-src="">
  <img src="" data-src="">
</div>

<div class="step">
</div>

<div class="step">
</div>

画像 div は動的で、直前の .step の画像を常に変更する必要があります。

これが私のバグのあるjsです:

$(document).on('click', '#images img', function(){ 
  var src = $(this).data('src'); 
  $(this).before().find('.step').css("background" , "url("+src+")");  
});
4

4 に答える 4

3

あなたが選択しているものは間違っていて、 before() 要素を追加していると思います。

$(this).parent().prev('.step').css("background" , "url("+src+")");

基本的な説明

$(this)  //the image
    .parent()  // the div #images 
        .prev('.step')  //get the previous sibling with the class step
            .css("background" , "url("+src+")");

すべての .step 要素が必要な場合は、.siblings(".step")代わりに使用します.prev(".step")

于 2013-10-11T13:50:54.733 に答える
2

before() ではなく、prev() が必要だと思います

于 2013-10-11T13:50:27.340 に答える
2

.before()メソッド はコンテンツを挿入しますが、以前の要素は見つかりません。.prev()methodが必要です。前の兄弟が見つかるため、次を介してトラバースする必要があることに注意してください.parent()。

$(this).parent().prev().css("background" , "url("+src+")");

デモ: http://jsfiddle.net/DBRkS/

一致する要素が見つかるまで逆方向に検索しないことに注意してください.prev()。指定したセレクターと一致する場合は直前の兄弟を選択し、そうでない場合は何も返しません。したがって、表示した html では、".step"セレクターの有無にかかわらず同じように機能します。

于 2013-10-11T13:51:02.543 に答える
2

$(this).parent()画像を保持するdivを提供し.prev('.step')、クラスステップで前の要素を提供します。before()一致した要素のセット内の各要素の前に挿入するためにのみ使用されます。

$(this).parent().prev('.step').css("background" , "url("+src+")");
于 2013-10-11T13:53:34.877 に答える