jquery - 将输入字段的值分配给 div / 重复内容的背景图像

Question

我使用下面的代码从输入字段的值更改background-imagediv，效果很好：

$(".ImageUrl").blur(function(){
    $(".Image").css("background-image", "url("+$(this).val()+")");
});

<div class="wrap">
    <section>
        <input class="ImageUrl"/>
        <div class="Image"></div>
    </section>
</div>

毫不奇怪，当.wrap添加一个重复的 div 并输入一个 url 时，它会改变两个 div 的背景，如下例所示：

http://jsfiddle.net/adige72/tKS6j/

我想要的是每个“包装”都像只有一个“包装”一样工作。

提前致谢！

Answer 1

为选择器使用唯一 ID 而不是类名，或更改选择器以仅选择第一个元素：

$(".ImageUrl").eq(0).....

Answer 2

只需选择兄弟姐妹.Image

$(".ImageUrl").blur(function(){
    $(this).siblings(".Image").css("background-image", "url("+$(this).val()+")");
});

编辑

以上假设当您说“毫不奇怪，添加重复的 div”时，您的意思是重复的.wrapdiv。

干杯