Question

imgPartBg返回undefined。尝试了.parent()或.prev()，但没有用。如何将图像从外部抓取到与细节相关的特定缩略图？

＆＃13;

$('[data-preview]').on('click', function(e) {
  var target = $('this').data('rel');
  var $target = $(target);

  var $imgPanel = $('.fullImagePanel');

  var imgPartBg = $target.siblings('.thumbnails img').attr('src');
  alert(imgPartBg);

  $('.img-panel-view').css('background-image', 'url(' + imgPartBg + ')');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item">
      <div class="row">
        <div class="col-sm-2 col-xs-6">
          <a href="#" class="thumbnail" data-rel="#details-1">
            <img src="http://placehold.it/250x250" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="details-1" class="details">
  <div class="productName">Test 4
    <div class="float-right">
      <a href="#" data-preview>Preview full image</a>
    </div>
  </div>
</div>
<div class="fullImagePanel">
  <div class="img-panel-view"></div>
</div>

＆＃13;

Answer 1

编辑返回＃

http://jsfiddle.net/446bpunz/7/

<a href="#" class="thumbnail" data-rel="#details-1">

<强> JQ

$('[data-preview]').on('click', function(e){

    var rel=$(this).parents('.details').attr('id');;

   var $target = $("a[data-rel='#"+rel+"']");


   var $imgPanel = $('.fullImagePanel');

   var imgPartBg = $target.find('img').attr('src');
   alert(imgPartBg);

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

Answer 2

你需要这个：

Fiddle

$('[data-preview]').on('click', function(e){
   var imgPartBg = $(this).parent().parent().parent().prev().find('img').attr('src');
   alert(imgPartBg);
    $('.img-panel-view').css({'height': '250px', 'background-image': 'url(' + imgPartBg + ')'});
});

如何从其他父缩略图中抓取图像，然后将背景图像附加到正确的位置

2 个答案:

Fiddle