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的人对我的问题有所了解。目前我正努力做到这一点，如果有一个＆＃34; unactive＆＃34;在这里面的div变为＆＃34; unactive＆＃34;并且再次运行检查。

一个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

这将检查是否出现具有类unactive的div，并将调用函数anim1()并删除该类并添加新类active：

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

使用JSFiddle：http://jsfiddle.net/9uasthp0/2/

如果存在div，则激活函数

1 个答案: