jQuery 克隆一个带有 active 类的图像并将其设置为 div 的背景图像答案

【问题标题】：jQuery clone an image with a class of active and set it as background image of a divjQuery 克隆一个带有 active 类的图像并将其设置为 div 的背景图像
【发布时间】：2016-08-17 17:38:06
【问题描述】：

我正在使用 twitter bootstrap 的默认轮播来制作一个简单的滑块。我想要实现的是，无论哪个项目处于活动状态，该项目内的 img 也应该被克隆并设置为具有“testimonials-bg”类的 div 的背景图像。

我尝试了以下代码，但它似乎不起作用：

$("#testimonial-carousel .item.active").each(function() {

      var $myBg  = $(".testimonial-bg", this),
          $myImg = $(".testimonial-img img", this);

      $myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});

    });

我为此做了一个小提琴：
https://jsfiddle.net/4t17wxxw/

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

订阅slid.bs.carousel事件并将背景图片更改为活动图片：

var $myBg  = $(".testimonial-bg");

  $('#testimonial-carousel').on('slid.bs.carousel', function () {
      var $img = $('img','.carousel-inner>.item.active');
      $myBg.css({backgroundImage: "url('"+ $img[0].src +"')"});
      console.log($img[0].src);   
  });

Working fiddle

【讨论】：

【解决方案2】：

您的代码仅在脚本启动时运行一次，但您希望在每次幻灯片更改时运行它。因此，您可以订阅 'slid.bs.carousel' 事件，每次轮播显示新幻灯片时都会触发该事件。

您可以在此处阅读有关该活动的更多信息：http://getbootstrap.com/javascript/#carousel-events。

// Testimonial Background from active slide
$('#testimonial-carousel').on('slid.bs.carousel', function () {
  $("#testimonial-carousel .item.active").each(function() {
      var $myBg  = $(".testimonial-bg", this),
          $myImg = $(".testimonial-img img", this);

      $myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});

    });
});

【讨论】：

【解决方案3】：

没有名为“testimonial-bg”的类，这里是在每张幻灯片旋转或需要分配背景图像时调用的代码。

$("#testimonial-carousel .item.active").each(function() {
    $(this).css("background", "url('"+$(this).find(".testimonial-img img").attr('src')+"')" );
});

Fiddle demo link

干杯

【讨论】：