Используйте JQuery для выбора родительского элемента “этого” (нажатый элемент)

У меня есть сценарий jQuery, который создает кольцевую галерею для вращения изображений, левых и правых при пользовательском щелчке. Сначала, я не был планированием помещения больше чем одной кольцевой галереи на единственной странице, но теперь потребность прибыла.

Проблема, я не знаю, как обратиться к одной кольцевой галерее (нажатый тот), когда пользователь нажимает кнопку.

Вот сценарий

$(function()
{
    // Put last item before first item, in case user clicks left
    $('.carousel li:first').before($('.carousel li:last'));

    // Right click handler
    $('.right-button img').click(function()
    {
        // Get width plus margins
        var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right')));

        // Get left indent
        var orig_left_indent = $('.carousel').css('left');

        // Calculate new left indent
        var left_indent = parseInt(orig_left_indent) - item_width;

        $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function()
        {
            // Put first item after last item
            $('.carousel li:last').after($('.carousel li:first'));

            // Set left indent to default
            $('.carousel').css({'left': orig_left_indent});
        });
    });

    // Left click handler
    $('.left-button img').click(function()
    {
        // Get width plus margins
        var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right')));

        // Get left indent
        var orig_left_indent = $('.carousel').css('left');

        // Calculate new left indent
        var left_indent = parseInt(orig_left_indent) + item_width;

        $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function()
        {
            // Put last item before first item
            $('.carousel li:first').before($('.carousel li:last'));

            // Set left indent to default
            $('.carousel').css({'left': orig_left_indent});
        });
    });

    // Close button handler
    $('.carousel-container .close-button img').click(function()
    {
        $('.carousel-container').fadeOut(1000);
    });
});

На данный момент, когда Вы нажимаете право или оставленный на любой кольцевой галерее, все они смещаются. Я не знаю, как получить ссылку на нажатую кольцевую галерею.

вот HTML

<div class="carousel-container clearfix">
    <div class="header close-button">
        <strong>Check These Out</strong>
        <?php echo html::image('media/images/close.gif'); ?></div>
    <div class="left-button"><?php echo html::image('media/images/left_arrow.png'); ?></div>
        <div class="carousel-inner">
            <ul class="carousel">
                <?php foreach ($items as $item): ?>
                <li> ... </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <div class="right-button"><?php echo html::image('media/images/right_arrow.png'); ?></div>
</div>

Как я достиг бы этого, я не знаю, как сослаться на кольцевую галерею, которую нажал пользователь, потому что стрелки являются дочерними элементами кольцевой галереи.

Править: Спасибо за ответы. carousel = $(this).parent() работы, но как, я проверяю, ли кольцевая галерея: анимированное использование селектора и новой переменной кольцевой галереи?

$ (':animated', кольцевая галерея)?

13
задан BDuelz 25 June 2010 в 16:26
поделиться

3 ответа

Внутри обработчика события переменная:

$(this)

получит вызывающий элемент. Оттуда, чтобы получить содержащий div, вы можете использовать функцию parent():

$(this).parent()

Используйте ее для перемещения по DOM.

30
ответ дан 1 December 2019 в 19:58
поделиться

Поскольку ваши теги действий вложены на первом уровне внутри карусели, вы можете сделать это внутри каждой функции, чтобы знать, принадлежит ли она:

var parent = $(this).parent().get(0);

На самом деле вы получите родительский объект, который теперь можно использовать.

1
ответ дан 1 December 2019 в 19:58
поделиться

Используйте функцию .parent () для перехода на уровень выше. Ваш код может выглядеть примерно так:

$('.right-button img').click(function()
    {
        carousel = $(this).parent();

        //bunch of code
    }
1
ответ дан 1 December 2019 в 19:58
поделиться
Другие вопросы по тегам:

Похожие вопросы: