jQuery получить следующий элемент после первого совпадения

Question

Я думаю, что моя проблема может быть довольно простой, но, попробовав разные подходы, я просто не понимаю.

Пользовательский интерфейс, который я хочу реализовать в основном выглядит следующим образом:

-Prev | Изображение 1 (активное) | Изображение 2 | Изображение 3 | Изображение n | Next-

Я хочу разрешить пользователю изменять активное изображение, нажимая кнопки «Далее» или «Пред.».

HTML для моего пользовательского интерфейса выглядит следующим образом:

<ul class="slideshow"> 
    <li><a href="#" id="prev">Prev</a></li> 
    <li><a href="#" class="pic-act"><img src="1.png" class="thumb" /></a></li> 
    <li><a href="#" class="pic"><img src="2.png" class="thumb" /></a></li> 
    <li><a href="#" class="pic"><img src="3.png" class="thumb" /></a></li> 
    <li><a href="#" id="prev">Next</a></li>  
</ul> 

Я хочу создать JQuery скрипт, который будет найти первый элемент LI с классом ПИК-акт и THH следующий элемент, который прилагается класс рис. После этого я хочу удалить класс pic-act из первого элемента и добавить к нему класс pic, а затем я хочу добавить класс pic-act во второй элемент.

Я пытаюсь сделать это с JQuery следовать код

$(document).ready(function() { 
$("#next").click(function(){ 
    var next = $(".pic-act ~ .pic"); 
    $(next).attr("class", "pic-act"); 
    $(".pic_act:first").attr("class", pic);  
}); 
}); 

К сожалению, этот код не может найти следующий нон ПОС одноактный элемент :(

Моя вторая требование, когда пользователь достигает последней Lī элемента и нажимает на кнопку один раз больше, «Next», самый первый элемент Ли становится активным. (То же самое с кнопкой «Назад»)

Я надеюсь, что это имеет смысл.

Большое вам спасибо!

Answer 1

Может быть, это:

$(function(){ 
     $('#next').click(function(){ 
       var $elem = $('.slideshow .pic-act').removeClass('pic-act').addClass('pic').next('.pic'); 
       if ($elem.length < 1){ 
         $('.slideshow .pic').eq(0).addClass('pic-act').removeClass('pic'); 
       }else{ 
         $elem.removeClass('pic').addClass('pic-act'); 
       } 
     });  
}); 

Answer 2

Это должно работать

$(document).ready(function() { 
    $("#next").click(function(){ 
     var elem = $(this).prev(".pic-art");// once you got here you would compare to anchor tag id last for second requirement 
     var nextele = elem.find(".pic"); 
     elem.addClass("pic"); 
     elem.removeClass("pic-act"); 
     nextele.addClass("pic-act"); 
     nextele.removeClass("pic"); 
    }); 
}); 

для второго требования вы можете просто добавить идентификатор в теге привязки first и last и сравнить селектор на него и идти оттуда

Answer 3

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

Если вы создаете слайд-шоу как учебное упражнение или личный проект, я бы рекомендовал посмотреть на jQuery traversing documentation, как было намечено в других чисто кодовых ответах. То, как вы написали код, показывает, что вы, вероятно, все еще пытаетесь понять, как jQuery подходит друг другу, и может быть хорошей идеей провести некоторое время с отличной документацией на сайте jQuery, работать с помощью нескольких учебных пособий и/или получить книгу jQuery , Подсказка: цепочка потрясающая

Если вы создаете слайд-шоу для профессионального проекта, я бы рекомендовал найти плагин, созданный кем-то другим. Это займет меньше времени и, вероятно, будет более высокого качества, так как он будет создан кем-то, у кого есть большой опыт работы с jQuery/JS (я сравнил свою реализацию слайд-шоу с реализацией профессионала: профессионал был выше и выше мой).