使用JQuery选择"this"的父元素. (元素点击) [英] Use JQuery to select parent element of "this" (element clicked)
问题描述
我有一个jQuery脚本,该脚本创建一个轮播,可在用户单击时左右旋转图像.最初,我没有计划在单个页面上放置多个旋转木马,但是现在需求已经到来.
I have a jQuery script that creates a carousel to rotate images left and right on user click. At first, I wasnt planning on putting more than one carousel on a single page, but now the need has arrived.
问题是,当用户单击按钮时,我不知道如何引用一个旋转木马(单击的那个).
The problem is, I dont know how to refer to one carousel (the one clicked) when the user clicks a button.
在此脚本
$(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);
});
});
到目前为止,当您在任一轮播上单击右或左时,所有这些都会移动.我不知道如何获得对所点击的轮播的引用.
As of now, when you click right or left on any carousel, all of them shift. I dont know how to get a reference to the carousel clicked.
此处是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>
我将如何实现此目的,我不知道如何引用用户单击的轮播,因为箭头是轮播的子元素.
How would I achieve this, I dont know how to reference the carousel that the user clicked, because the arrows are child elements of the carousel.
感谢您的回答. carousel = $(this).parent()
可以工作,但是如何使用选择器和新的轮播变量检查轮播是否已动画化呢?
Thanks for the answers. carousel = $(this).parent()
works, but how do I check if the carousel is :animated using the selector and the new carousel variable?
$(':animated',轮播)?
$(':animated', carousel) ?
推荐答案
在事件处理程序中,变量:
Inside of an event handler, the variable:
$(this)
将为您提供调用元素.从那里,要获取包含的div,可以使用parent()函数:
will get you the calling element. From there, to get the containing div you can use the parent() function:
$(this).parent()
使用它来遍历DOM.
这篇关于使用JQuery选择"this"的父元素. (元素点击)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!