Jquery добавление класса в неправильную семантику

0

Я пытаюсь создать слайдер изображения с разметкой HTML и script ниже:

HTML

<div id="button-previous">prev</div>  <div id="button-next">next</div>


<figure>

<a href="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" />
</a>

<a href="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg">
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
</a>

<a href="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg">
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
</a>

<a href="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" >
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</a>

<figcaption>no need class "active" or "oldActive" or on figcation sematic</figcaption>

</figure>

Сценарий

$(document).ready(function () {
    $('figure a').first().addClass('active');
    $('figure a').hide();
    $('figure a.active').show();

    $('#button-next').click(function () {

        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
            $('figure a').first().addClass('active');
        } else {
            $('figure a.oldActive').next().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();


    });

    $('#button-previous').click(function () {
        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure .oldActive').is(':first-child')) {
            $('figure a').last().addClass('active');
        } else {
            $('figure a.oldActive').prev().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();
    });

});

ПРОБЛЕМЫ СЛЕДУЮЩИМ КЛИКОМОМ, (последний ребенок)

  1. У вас нет problerm с #button-previous.
  2. Но сценарий по-прежнему отправляет/добавляет class="active" в <figcaption> после последнего ребенка figure a когда нажимает #button-next у last-child of figure a.
  3. И слайдер остановит функцию, повернутую к fisrt-child обратно.

[ДЕМО]

ЗАРАНЕЕ СПАСИБО.

Теги:
semantics
addclass

1 ответ

0
Лучший ответ

Проблема заключается в том, что внутри figure тега, figcaption последний ребенок, не последний тег! a Таким образом, вторая строка $('#button-next').click должен быть изменен:

if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {

...к этому:

if ($('figure a.oldActive').is('figure a.oldActive:nth-last-child(2)')) {

jsfiddle

  • 0
    Да @kol ,, Спасибо, братан, это работает ^ _ ^. Большое спасибо!!
  • 0
    Пожалуйста :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню