使用jquery从内联css获取背景图像URL

Question

我需要与url(img/bg/06.jpg)相同的链接，但jquery给我一个与url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg")相同的长链接

这是我的代码：

<div class="box_bg">
    <div style="background-image: url(img/bg/06.jpg)" class="single_bg"></div>
    <div style="background-image: url(img/bg/07.jpg)" class="single_bg"></div
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">

<script>
    $('.box_bg .single_bg').each(function () {
        var bg_img = $(this).css('backgroundImage');
        $(this).click(function() {
            window.alert(bg_img);
        });
    });
</script>

Answer 1

如果你的内联css中没有其他属性，你可以简单地使用它：

 $('.box_bg .single_bg').click(function () {
        var bg_img = $(this).attr('style').replace('background-image: ','');
        alert(bg_img);

  });

演示：https://jsfiddle.net/k0ynq7sk/

如果您想在点击特定图片时获取图片网址，则无需每个（）