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>