javascript - jQuery - 通过 Id 获取动态 (*) 元素并放入数组

Question

我正在创建一个分类网站。搜索页面上会呈现多个产品卡。每张产品卡可以有多个图像。当这种情况发生时，我将使用 slider 。

为了构建这个 slider ，我使用了 jquery 库 (bxslider)。该应用程序基于 WordPress。

到目前为止，一切都很顺利。卡和 slider 工作。但是，当我有不止一张卡(帖子)时， slider 控件会更改所有卡上的位置。当然，因为每个人的选择器都是相同的。

然后我将帖子 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>

我的 jQuery

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

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

Answer 1

不要为每个 slider 提供单独的 ID card-slider-{id}，而是考虑为它们提供一个公共(public)类 card-slider 并在具有该类的所有元素。您可以在 slider 的初始化参数中传递上一个/下一个选择器的 ID(例如，您可以将其存储在数据属性中):

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',
    });
});

标记:

<?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>