Активация функции, если присутствует div

Question

В настоящее время я пишу полноэкранный слайдер с анимированными элементами внутри. Я хочу, чтобы эти внутренние элементы были активированы с помощью той же кнопки, что и ползунок (клавиша правого направления), и поэтому необходимо сначала проверить, есть ли они там, и, во-вторых, активировать их один за другим. У меня есть идея, как это сделать, аналогично тому, как разделы были подсчитаны и названы в этом примере, однако, как новичок в jQuery/Javascript, я чувствую себя немного потерянным. Логика я пытаюсь применить в основном:

Onleftclick { 

Check if there are any "unactivated" elements in the slide 

If there isn't any, move on 

If there are elements in the slide, activate a function (eg "anim1) and change the "unactivated" div to "activated" 

As the animation is activated, the elements class changes to "activated" 

} 

Это моя первая попытка создать что-то с нуля без учебников, и я оценил бы кто-то лучше разбирается в JavaScript сияющий свет на моем вопросе. На данный момент я пытаюсь сделать так, если в нем есть «неактивный» div, он изменяется на «unactive», и проверка запускается снова.

codepen пример: http://codepen.io/anon/pen/ZYbVxG

Текущий файл размещается на сайте: http://johncashin.net/test_sites/marc_comic_2/

Заявление в вопросе:

$(document).ready(function() { 
     //This counts the length of the sections 
     //var page is a variable that counts how many panels have been put across 
     var page = 0; 
     var sectionCount = $("section").length; 
     //This sets the variable bodysize, which multiplies viewportwidth by sectioncount 
     $('.container').css({ 
     'width': (vpw * sectionCount) + 'px' 
     }); 
     // Programatically add the class "1","2","3" etc to the sections consecutively, so  they can be scrolled to (ie scrollTo:3) 
    $('section').each(function(i) { 
    $(this).addClass('s' + i); 
    }); 
    // This is the keypress to activate scroll function 
    // there is also a variable that will stop it going above the amount of sections in the page. 
    window.onkeyup = function(scrollkey) { 
    var key = scrollkey.keyCode ? scrollkey.keyCode : scrollkey.which; 
    if (key == 39) { 
     if (page < sectionCount - 1) { 
     page++; 
     TweenLite.to(window, 1, { 
      scrollTo: { 
      x: $(".s" + page).position().left 
      }, 
      ease: Power2.easeIn 
     }); 
     } else {} 
    } else if (key == 37) { 
     //This adds backwards scrolling functionality, and stops the page variable from going any lower than 0, 
     if (page > 0) { 
     page--; 
     TweenLite.to(window, 1, { 
      scrollTo: { 
      x: $(".s" + page).position().left 
      }, 
      ease: Power2.easeIn 
     }); 
     } else {} 
    } 
    } 
}); 

Answer 1

Это будет проверять для любого вхождения DIV, имеющего класс unactive и вызывается функция anim1() и удаляет класс и добавляет новый класс: active:

$("div.unactive").on('click', function() { 
    anim1(); 
    var obj = $("div.unactive"); 
    obj.removeClass("unactive"); 
    obj.addClass("active"); 
}); 

Рабочая JSFiddle: http://jsfiddle.net/9uasthp0/2/