从bxslider中的可见li获取数据

时间:2014-08-02 11:14:59

标签: jquery wordpress bxslider

我有一个滑块。我想从可见元素li中获取数据,并在putm中将它们放入我的表单输入中。我怎么能这样做? 有代码

    <div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 297px;">
    <ul id="snap" class="bxslider" style="width: auto; position: relative;">
        <li data-snap_id="654" data-title="Автоматическая оснастка Colop R30 (Черная)" data-image="wp-content/uploads/2014/08/r30.jpg" style="float: none; list-style: none; position: absolute; z-index: 50; display: block; width: 310px;"><img src="wp-content/uploads/2014/08/r30.jpg" title="Автоматическая оснастка Colop R30 (Черная)">
            <div class="bx-caption"><span>Автоматическая оснастка Colop R30 (Черная)</span></div></li>
        <li data-snap_id="658" data-title="Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)" data-image="wp-content/uploads/2014/08/d5de5ccd5ade13bb4d8e82b4fa6371b5.jpg" style="float: none; list-style: none; position: absolute; z-index: 0; display: none; width: 310px;"><img src="wp-content/uploads/2014/08/d5de5ccd5ade13bb4d8e82b4fa6371b5.jpg" title="Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)">
            <div class="bx-caption"><span>Полуавтоматическая оснастка Colop Stamp Mouse R40 (Черная)</span></div>
        </li>
        <li data-snap_id="660" data-title="Ручная оснастка D 30 мм" data-image="wp-content/uploads/2014/08/a6030d3f270432a8f138f8fe9d236b7c.jpg" style="float: none; list-style: none; position: absolute; z-index: 0; display: none; width: 310px;"><img src="wp-content/uploads/2014/08/a6030d3f270432a8f138f8fe9d236b7c.jpg" title="Ручная оснастка D 30 мм">
            <div class="bx-caption"><span>Ручная оснастка D 30 мм</span></div>
        </li>
    </ul>
</div>
    <div class="bx-controls bx-has-controls-direction">
        <div class="bx-controls-direction">
            <a class="bx-prev" href="">Prev</a>
            <a class="bx-next" href="">Next</a>
        </div>
    </div>
</div>

这是jquery:

jQuery(".bx-prev", "bx-next").on('click', function() {
    jQuery('#snap').find('li:visible');
    var snap_id = jQuery(this).data('snap_id');
    alert(snap_id);

});

2 个答案:

答案 0 :(得分:1)

修正了您的代码:

        $(".bx-prev, .bx-next").on('click', function () {
            var el = $('#snap').find('li:visible');
            var snap_id = el.attr('data-snap_id');
            alert(snap_id);
        });

答案 1 :(得分:0)

在这种情况下不应该使用jQuery(this)。错误与选择器有关 - jQuery(“。bx-prev,.bx-next”)您可以尝试以下代码:

jQuery(".bx-prev, .bx-next").on('click', function() {

var snap_id = jQuery('#snap').find('li:visible').data('snap_id');
alert(snap_id);

});