設置圖像作爲兄弟元素的背景

Question

我的目標是讓用戶選擇背景，但我的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+")"); 
}); 

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+")"); 

如果你想把所有的。步驟的元素，你可以使用.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+")");