代码之家  ›  专栏  ›  技术社区  ›  Gislef

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

  •  1
  • Gislef  · 技术社区  · 10 年前

    我试图通过点击一个div和另一个dive来改变背景图像:

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

    但这不管用

    谢谢你的帮助

    2 回复  |  直到 10 年前
        1
  •  2
  •   iCollect.it Ltd    10 年前

    看起来您错过了从单击的元素获取URL value 属性:

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

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

    JS小提琴: https://jsfiddle.net/TrueBlueAussie/cfvLk6dL/

    结果: enter image description here

        2
  •  0
  •   hknkrt    10 年前

    val方法在此上下文中是错误的。

    如果您想根据div的value属性更改背景,您应该使用$(this)。attr(“value”)或this.value

    但如果你想根据点击的图像源改变背景 你应该试试$(这个)。attr(“src”)或this.src

    此外,您需要将div的选择器更改为类似于$(this).closest(“div”)的值

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