使用 JQuery 选择“this”（被点击的元素）的父元素。

Question

我有一个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()可行，但是如何使用选择器和新的carousel变量检查轮播是否:animated？

$(':animated', carousel) ?

- BDuelz

Answer 1

在事件处理程序内，变量:

$(this)

将获得调用元素。从那里开始，您可以使用parent()函数获取包含的div：

$(this).parent()

使用它来遍历DOM。

- riwalk

Answer 2

由于您的操作标签嵌套在轮播图的第一层内，因此您可以在每个函数内执行此操作，以了解它所属的位置：

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

实际上会获取到父对象，你现在可以使用它。

- yoda

Answer 3

使用 .parent() 函数向上移动一级。你的代码可能如下所示：

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

        //bunch of code
    }

- Peter Anselmo