Ограничение функции родительским div - PullRequest
Новая
       11

Ограничение функции родительским div

1 голос
/ 21 июля 2011

У меня есть эта функция карусели: 

if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("ul.display li:eq(0))").show();
}
else
{
$("ul.display li:first").show();
}

$(".viewer ul li.img:first").addClass('viewerOn');

function prodCarousel(){
var aSpecimen = 0;

    $('li.next a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen + 1;

        if (aSpecimen == $('ul.display li').length + 0)
            aSpecimen = 0;

        if (aSpecimen == $('.viewer ul li.img').length + 0)
            aSpecimen = 0;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");

        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');

        return false;
    });

    $('li.prev a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen - 1;

         if (aSpecimen == -1) aSpecimen = $('ul.display li').length - 1;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");
        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');
        return false;
    });

}

Это прекрасно работает, но так как у меня есть несколько div на странице, которые используют класс .dispaly , функция циклически перебирает всеизображения на странице.

Мне бы хотелось, чтобы функция циклически перебирала фотографии внутри родительского элемента.

Я не уверен, как это сделать?

1 Ответ

1 голос
/ 21 июля 2011

Вы ссылаетесь на ul.display, что означает, что не имеет значения, если у вас есть какие-либо элементы на странице с этим классом.

Предполагая, что вы имеете в виду несколько <ul> с классом .display и что кнопки prev и next находятся внутри того же контейнера, что и <ul>, которым вы хотите манипулировать, вы можете ссылаться на этого родителя по щелчку событие: 

$('li.next a').click(function() {
    $(this).parent().parent().parent().find('ul.display li').hide();
    ... etc
});

Первый parent() ссылается на li.next, второй parent() ссылается на <ul>, содержащий li.next, а третий parent() ссылается на контейнер <ul>, возможно, div, который может легко содержать ul.display также, если вы настроили DOM для поддержки этих отношений.

...