Question

HTML

    <div class="col-4.col-xs-12 col-sm-6 col-md-3">
     <div class="ratio-14-16">
       <div class="productImg" style="background-image:url('http://paperbotz.files.wordpress.com/2010/11/hello_kitty001.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;width:200px; height: 200px">
       </div>
       <div class="info uppercase text-center">
        <span data-image>View Image</span>
       </div>
    </div>
   <div class="details">Test 2</div>
<div class="img-panel-view.cly-abs-center" style="background-size: cover; background-repeat: no-repeat; backgroung-position: center center"></div>

JQuery的

$('[data-image]').on('click', function(e){
    e.preventDefault();
    var imgPartBg = $(this).closest().css('background-image');
    alert(imgPartBg);

    $('.img-panel-view').css('background-image', 'url(' + bg + ')');
});

图库中会有动态图像，当点击其中一个时，它应该抓住特定div中的特定背景图像，以便在叠加时全部显示。他们将拥有完整的绝对路径。替换（）将不会被使用。

尝试使用nearest（）或兄弟姐妹（＆＃39; .productImg＆＃39;）并返回undefined。单击特定图像时如何获取背景图像？

更新

还有一个类似的问题。如何抓住细节？尝试过最近，上一个，父母或兄弟姐妹，但它并没有抓住细节div

Answer 1

$('[data-image]').on('click', function(e){
    e.preventDefault();
    var imgPartBg = $(this).parent().prev('div.productImg').css('background-image'),
        path = imgPartBg.replace('url(','').replace(')','');

    $('.img-panel-view').css('background-image', 'url(' + path + ')');
});

Answer 2

尝试此操作以检索＆＃34; background-image＆＃34;的网址。 http://jsfiddle.net/76oshjrk/

HTML略有更新：

<span id="data-image">View Image</span>        <!-- added id tag -->

JQuery略有修改：

$('.productImg').on('click', function(e){
   e.preventDefault();
   var src = $(this).css('background-image');       //get "background-image" url
   var myURL = src.slice(4,src.length-1);         //remove "url(" and ")"
   $('#data-image').html("url: " +myURL);         //full url of "background-image"

});

单击图像时获取特定图像以放大图像

2 个答案: