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

如果您想要所有.step元素，可以使用.siblings(".step")代替.prev(".step")

Answer 2

我认为你想要prev（），而不是之前的（）

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

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

4 个答案: