У меня есть сценарий 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', кольцевая галерея)?
Внутри обработчика события переменная:
$(this)
получит вызывающий элемент. Оттуда, чтобы получить содержащий div, вы можете использовать функцию parent():
$(this).parent()
Используйте ее для перемещения по DOM.
Поскольку ваши теги действий вложены на первом уровне внутри карусели, вы можете сделать это внутри каждой функции, чтобы знать, принадлежит ли она:
var parent = $(this).parent().get(0);
На самом деле вы получите родительский объект, который теперь можно использовать.
Используйте функцию .parent () для перехода на уровень выше. Ваш код может выглядеть примерно так:
$('.right-button img').click(function()
{
carousel = $(this).parent();
//bunch of code
}