Question

我有一组div，当选中时会打开一个模态窗口。我希望模态窗口的背景图像网址从被选中打开它的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);
}

和jQuery我只是用来在选择div时打开模态窗口：

 $('.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对象的引用传递给你调用的函数。像这样：

＆lt; div class =“cover-item”style =“background-image：url（'https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png'）” onclick =“setBackground（this）”＆gt;＆lt; / DIV＆GT;

最后将背景设置为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);
};

P.S：虽然没有测试你的风格。但上面的例子只是通过设置div的高度＆amp;宽度。

如何使用jQuery将背景图像URL从一个div传递到另一个div？

3 个答案: