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>

我的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

不要给每个滑块指定一个单独的标识card-slider-{id}，而是考虑给它们所有公共类card-slider，并在具有该类的所有元素上启动滑块插件。您可以在滑块的初始化参数中传递prev / next选择器的ID（您可以将其存储在数据属性中）：

滑块启动

$( ".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>

jQuery - 按ID获取动态（*）元素并放入数组

1 个答案: