如何使用jQuery將背景圖片網址從一個div傳遞到另一個？

Question

我有一組div，當選中時會打開一個模態窗口。 我希望將模式窗口的背景圖像URL從選中以打開它的div傳遞到。

這是div和模式窗口的html：

  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png')"></div>
  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1177-64ACF6EA-uk.png')"></div>
  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1195-057710EE-uk.png')"></div>

  <div class="modal-window"></div>

最初用於隱藏模式的CSS，然后在調用時將其顯示出來：

.modal-window //hide it out the viewport initially {
  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);

   background-image: url(/* want to dynamically set this */)

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.modal-window-open //reveal it {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

和我用來選擇div時打開模態窗口的jQuery：

 $('.cover-item').on('click', function() {
      $('.modal-window').toggleClass('modal-window-open');
  });

現在，如何在選擇特定的.cover-item div時將其背景圖片網址傳遞給模式窗口？

Answer 1

Try following code    
$('.cover-item').on('click', function() {
          var bg = $(this).css('background-image');
          $('.modal-window').toggleClass('modal-window-open');
          $('.modal-window').css("background-image", bg);  
      });

Answer 2

使用的組合html()與this

$('.cover-item').on('click', function() {
      $('.modal-window').html($(this));
      $('.modal-window').toggleClass('modal-window-open');

  });

Answer 3

我想您需要在div本身上添加onclick偵聽器，並將div對象的引用傳遞給您調用的函數。 像這樣：

<div class =“ cover-item” style =“ background-image：url（' https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png&#39 ;）” onclick =“ setBackground（this） “> </ div>

最后將背景設置為JS中的.cover-item div ：

var setBackground = function (divObject) {
    $('.modal-window').toggleClass('modal-window-open');
    //Dynamically sets BG image
    $('.modal-window').css('background-image', divObject.style.backgroundImage);
};

PS：尚未測試您的樣式。 但是上面的示例僅通過設置div的高度和寬度就可以很好地工作。