单击一个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属性中的网址：

$(".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")+ ')');
});