将图像设置为同级元素的背景

set image as a background of a sibling element

本文关键字：元素 背景 图像 设置      更新时间：2023-09-26

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

我认为您选择的是错误的，并且在 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")

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

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

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

.before() 方法插入内容，它找不到较早的元素。您需要.prev()方法，请注意它找到前一个同级，因此您需要遍历.parent()：

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

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

请注意，.prev()在找到匹配元素之前不会向后搜索，如果它与您提供的选择器匹配，它会选择紧靠前面的同级元素，否则它不返回任何内容。因此，对于您显示的html，无论是否使用".step"选择器，它都可以正常工作。

相关文章：