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

我想你想要 prev()，而不是 before()

于 2013-10-11T13:50:27.340 回答
2

该.before()方法 插入内容，它没有找到更早的元素。您需要该.prev()方法，注意它找到了前一个兄弟，因此您需要遍历.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 回答