设置图像作为兄弟元素的背景

我的目标是让用户选择背景，但我的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+")"); 
});

来源

2013-10-11 lipenco

我知道你在选择是错误的，（）追加元素之前。

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

来源

2013-10-11 13:50:54 epascarello

我想你想上一个（），而不是之前（）

来源

2013-10-11 13:50:27 andygoestohollywood

的.before() method插入内容，它没有找到一个前面的元素。你想要.prev() method，指出它找到以前的兄弟，所以你需要通过.parent()遍历：

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

演示：http://jsfiddle.net/DBRkS/

注意.prev()，直到它找到一个匹配的元素不反向搜索。如果它与您提供的选择器相匹配，则选择前一个兄弟姐妹，否则它不返回任何内容。所以对于你显示的html，无论是否使用".step"选择器，它都可以工作。

来源

2013-10-11 13:51:02 nnnnnn

$(this).parent()会给你保存图像的div & .prev('.step')为你提供上一步的元素。 before()仅用于在匹配元素集合中的每个元素之前插入。

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

来源

2013-10-11 13:53:34 Krishna

设置图像作为兄弟元素的背景

回答

相关问题