获取 jquery.jcarousel 中的可见元素答案

【问题标题】：Get the visible elements in a jquery.jcarousel获取 jquery.jcarousel 中的可见元素
【发布时间】：2013-10-09 12:02:41
【问题描述】：

我正在构建一个 JavaScript 轮播，我需要提取轮播每次更改时显示的链接的 URL。

我正在使用 jQuery jCarousel，因为它允许开发人员绑定不同的处理程序来更改事件。

轮播应一次显示 4 个项目，一次滚动 4 个项目。

我实现的 itemFirstInCallback 处理程序获取页面中第一个链接的 href（例如索引 1、索引 5）

我需要获取所有 4 个可见链接中显示的第一个链接的当前显示 URL

元素，我想知道如何实现这一目标？

下面的演示代码...

设置轮播

 $(document).ready(function () {

            $('#featured_carousel_list').jcarousel({ 
visible: 4, 
scroll: 4, 
initCallback: mycarousel_initCallback, 
buttonNextHTML: null, 
buttonPrevHTML: null,
itemFirstInCallback: function (carousel, liElement, intemIndex, action) {
                    // get URL's of visible items
                    var item_URL = $(liElement).children('a:last-child').attr('href');
                    alert(item_URL);
                }

            });


        });

        function mycarousel_initCallback(carousel) {
            $('#next_button').bind('click', function () { carousel.next(); return false;});
            $('#prev_button').bind('click', function () { carousel.prev(); return false;});
        }

HTML 列表

<div id="prev_button"><<</div>
<div id="next_button">>></div>
    <ul class="featured_carousel_list" id="featured_carousel_list">
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=1" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=2" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=3" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=4" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=5" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=6" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=7" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=8" class="item_text_link">title</a></li>
    </ul>

【问题讨论】：

标签： javascript jquery visibility jcarousel carousel

【解决方案1】：

如果我正确理解了您的问题，那么您希望获取所有可见元素的 URL。您可以通过将 itemFirstInCallback 回调替换为 itemVisibleInCallback 来实现此目的：

itemVisibleInCallback: function(carousel, liElement) {
  var item_URL = $(liElement).children('a:last-child').attr('href');
  console.log(item_URL);
}

当所有 4 个项目变为可见时，将触发此回调。

【讨论】：

感谢您的帮助。我实际上需要在同一个回调中获取所有 URL，并通过一个 ajax 调用将它们报告回服务器，因此 4 个不同的回调实际上不是一个选项。我最终使用 slice 函数遍历了接下来的 3 个
元素...itemFirstInCallback: function (carousel, liElement, itemIndex, action) { var urlItems = []; $.each($(liElement).parent().children().slice((itemIndex - 1), (itemIndex + num_items) - 1), function (index, value) { var itemURL = $(value).children('a:last-child').attr('href'); urlItems.push(itemURL); });