jQueryアクティブなクラスの画像を複製し、divの背景画像に設定します

Question

シンプルなスライダーには、twitterのブートストラップのデフォルトカルーセルを使用しています。私が達成したいのは、どちらのアイテムがアクティブであっても、そのアイテムの中の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/

Answer 1

slid.bs.carouselイベントに登録し、アクティブ1に背景画像を変更します。

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

Answer 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 +"')"}); 

    }); 
}); 

Answer 3

「証言-BG」と呼ばれる何のクラスはありませんが、ここにいるはずのコードです各スライドの回転を呼び出すか、背景イメージを割り当てる必要がある場合に使用します。この作品

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

Fiddle demo link

乾杯