单击一个 div 并更改另一个 div 中的背景图像

Question

我试图通过点击一个 div 和另一个 div 更改背景图像：

<div class="stileone" value="http://lorempixel.com/200/200/">
<img scr="http://lorempixel.com/200/200/"> 
</div>

<div class="stileone" value="http://lorempixel.com/150/150/">
    <img scr="http://lorempixel.com/150/150/"> 
</div>

<div id="stileone">
    Div Content
</div>

jQuery：

$(".stileone").on("click", function() {
    $('#stileone').css('background-image', 'url(' +.val()+ ')');
}); 

但这不起作用

感谢您的帮助

Answer 1

您似乎错过了从被点击元素的 value 属性中获取 URL：

$(".stileone").on("click", function() {
    $('#stileone').css('background-image', 'url(' + $(this).attr('value') + ')');
}); 

另请注意：在示例中，您的图片上有 scr 而不是 src :)

JSFiddle: https://jsfiddle.net/TrueBlueAussie/cfvLk6dL/

结果：

Answer 2

val 方法在这种情况下是错误的。

如果你想根据 div 的 value 属性改变背景，你应该使用 $(this).attr("value") 或 this.value

但是如果你想根据点击的图片源来改变背景 你应该试试 $(this).attr("src") 或 this.src

您还需要将 div 的选择器更改为类似 $(this).closest("div")

$(".stileone").on("click", function() {
    $(this).closest("div").css('background-image', 'url(' +.$(this).attr("src")+ ')');
});