如何通過使用jQuery的孩子，存儲值從每個孩子的背景圖像的CSS屬性迭代與其它元素

-1

我使用jQuery構建滑塊上使用這些值。我想動態構建它，以便根據用戶輸入在不同數量的幻燈片上工作。如何通過使用jQuery的孩子，存儲值從每個孩子的背景圖像的CSS屬性迭代與其它元素

我的代碼輸出的簡單的例子應該是這樣的，如果用戶在WordPress創建通過管理儀表板5張幻燈片：

<div class="slides"> 
    <div class="slide">Slide content with background image</div> 
    <div class="slide">Slide content with background image</div> 
    <div class="slide">Slide content with background image</div> 
    <div class="slide">Slide content with background image</div> 
    <div class="slide">Slide content with background image</div> 
</div> 
<div class="controls"> 
    <a class="thumbnail_slider_control"></a> 
    <a class="thumbnail_slider_control"></a> 
    <a class="thumbnail_slider_control"></a> 
    <a class="thumbnail_slider_control"></a> 
    <a class="thumbnail_slider_control"></a> 
</div>

背景圖像通過槽CSS背景圖片屬性施加。我想遍歷.slides的所有孩子，並保存陣列中的所有背景圖像值（這是我的第一個想法）。

之後，我想循環使用.controls兒童，並將相同的URL用作兒童的背景圖片。

我在這裏的目標是讓每一個控制已經從幻燈片背景圖像應用到消除用戶需要手動分配2位相同的URL對應的背景圖像生成縮略圖滑塊導航。

我在這裏搜索了類似的問題，但似乎沒有這樣的問題。

來源

2017-07-25 Usce

相當容易匹配控制由索引滑動然後使用css()既是getter和setter

var $slides = $('.slide'); 
 

 
$('.thumbnail_slider_control').each(function(i){ 
 
    $(this).css('backgroundImage', $slides.eq(i).css('backgroundImage')) 
 
})

.slide, .thumbnail_slider_control{ 
 
    display:block; 
 
    background-repeat: no-repeat; 
 
    height:50px 
 
} 
 
#slide-1{ 
 
    background-image: url(http://via.placeholder.com/150x50) 
 
} 
 
#slide-2{ 
 
    background-image: url(http://via.placeholder.com/150x50/000000/ffffff) 
 
} 
 

 
#slide-3{ 
 
    background-image: url(http://via.placeholder.com/150x50/990000/ffffff) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slides" style="float:left; width:50%"> 
 
    Slides 
 
    <div id="slide-1" class="slide"></div> 
 
    <div id="slide-2" class="slide"></div> 
 
    <div id="slide-3" class="slide"></div> 
 
</div> 
 
<div class="controls" style="float:right; width:50%"> 
 
    Controls 
 
    <a class="thumbnail_slider_control"></a> 
 
    <a class="thumbnail_slider_control"></a> 
 
    <a class="thumbnail_slider_control"></a>  
 
</div>

來源

2017-07-25 23:42:15 charlietfl

如何通過使用jQuery的孩子，存儲值從每個孩子的背景圖像的CSS屬性迭代與其它元素

回答

相關問題