установить изображение в качестве фона элемента-брата

Question

моя цель - позволить пользователю выбрать фон, но мой js doesn; t работает.

<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 как раз перед этим.

вот мой багги ЯШ:

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

Answer 1

Я думаю, что вы выбираете не так и перед() добавляет элементы.

$(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")

Answer 2

Я думаю, что вы хотите, пред(), а не до()

Answer 3

.before() methodвставки контента, он не находит более раннего элемента. Вы хотите .prev() method, отметив, что он находит предыдущий родственный, так что вы должны пройти через .parent():

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

Демо: http://jsfiddle.net/DBRkS/

Обратите внимание, что .prev() не выполняет поиск в обратном направлении до тех пор, пока не найдет соответствующий элемент, он выбирает непосредственно предшествующего брата, если он соответствует выбранному вами селектору, иначе он ничего не возвращает. Таким образом, для html, который вы указали, он будет работать с селектором ".step" или без него.

Answer 4

$(this).parent() предоставит вам div, который содержит изображения & .prev('.step') дает вам предыдущий элемент с шагом класса. before() используется только для вставки перед каждым элементом в наборе согласованных элементов.

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