jQuery - 通過標識獲取動態（*）元素並放入數組

Question

我正在創建分類網站。在搜索頁面將呈現多個產品卡片。每張產品卡可以有多個圖像。當發生這種情況時，我將使用滑塊。

要構建這個滑塊，我使用了一個jQuery庫（bxslider）。該應用程序基於WordPress。

到目前爲止，一切進展順利。卡和滑塊工作。但是，當我有多張卡片（張貼）時，滑塊控件會更改所有卡片上的位置。當然，因爲選擇器對每個人都是一樣的。

然後我將帖子ID添加到ID選擇器，製作每張卡片。但現在必須做jQuery明白，有幾張獨特的卡片可以讓他應用在每張卡片中創建幻燈片的功能。

我的PHP代碼

<?php 
    $id = get_the_ID(); 
?> 
<div id="card-slider-<?php echo $id?>"> 
    <?php 
     $images = get_post_meta($post->ID, 'vdw_gallery_id', true); 
     foreach ($images as $image) { ?> 
      <li> 
       <div class="card-slide-item"> 
        <img src="<?php echo wp_get_attachment_url($image, 'imob-thumbs'); ?>"> 
       </div> 
      </li> 
     <?php } 
    ?> 
</div> 

<div class="card-slide-prev"></div> 
<div class="card-slide-next"></div> 

(function($){ 
    $.fn.sliderID = function() { 
     var sliders = []; 
     sliders = $('[idˆ=card-slider-]').length; 
     console.log('sliders ids', sliders); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    $.fn.sliderID(); 
}); 

Answer 1

而不是給每個滑塊單獨的ID card-slider-{id}我的jQuery，考慮給予他們一個共同的類card-slider並啓動滑塊插件上的所有元素有那個類的。

滑塊開始

$(".card-slider").each(function(index) { 
    var slider_id = $(this).data('id'); 
    $(this).bxSlider({ 
     nextSelector: '#card-slide-'+slider_id+'-next', 
     prevSelector: '#card-slide-'+slider_id+'-prev', 
    }); 
}); 

標記：可以沿上/下一個選擇的滑塊的初始化參數的ID（可以例如存儲在數據屬性）傳遞

<?php 
    $id = get_the_ID(); 
?> 
<div class="card-slider" data-id="<?php echo $id; ?>"> 
    <?php 
     $images = get_post_meta($post->ID, 'vdw_gallery_id', true); 
     foreach ($images as $image) { ?> 
      <li> 
       <div class="card-slide-item"> 
        <img src="<?php echo wp_get_attachment_url($image, 'imob-thumbs'); ?>"> 
       </div> 
      </li> 
     <?php } 
    ?> 
</div> 

<div id="card-slide-<?php echo $id; ?>-prev"></div> 
<div id="card-slide-<?php echo $id; ?>-next"></div>