Блог

Главная - Вопросы по программированию - Получение видимых элементов в jquery.jcarousel

Получение видимых элементов в jquery.jcarousel

#javascript #jquery #visibility #jcarousel #carousel

#javascript #jquery #видимость #jcarousel #карусель

Вопрос:

Я создаю карусель JavaScript, и мне нужно извлекать URL-адреса ссылок, отображаемых при каждом изменении карусели.

Я использую jQuery jCarousel, поскольку он позволяет разработчику привязывать различные обработчики для изменения событий.

Карусель должна отображать 4 элемента одновременно и прокручивать 4 элемента одновременно.

Реализованный мной обработчик itemFirstInCallback получает href первой ссылки на странице (например, индекс 1, индекс 5).

Мне нужно получить отображаемый в данный момент URL-адрес для первой ссылки, отображаемой во всех 4 видимых

  • элементы и мне интересно, как этого добиться?

    демонстрационный код ниже…

    Настройка карусели

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

    • Ответ №1:

    Если я правильно понял ваш вопрос, то вы хотите получить URL-адреса всех видимых элементов. Вы можете добиться этого, заменив свой itemFirstInCallback обратный вызов на itemVisibleInCallback :

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

    Этот обратный вызов будет запущен для всех 4 элементов, когда они станут видимыми.

    Комментарии:

    1. Спасибо за вашу помощь. На самом деле мне нужно было получить все URL-адреса в одном обратном вызове и отправить их обратно на сервер с помощью одного ajax-вызова, поэтому 4 разных обратных вызова на самом деле не были вариантом. В итоге я перебрал следующие 3 элемента <li> с помощью функции slice… 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); });