如果一个div存在，激活一个函数

我目前正在编写一个带有动画元素的全屏幕滑块。我希望这些内部元素可以通过与滑块相同的按钮（向右方向键）来激活，因此需要先检查它们是否在那里，然后再逐一激活它们。我有一个关于如何去解决这个问题的想法，就像这个例子中的部分被计数和命名一样，但是作为jQuery/Javascript的一个新手，我感觉有点不知所措。我尝试应用的逻辑基本上是：如果一个div存在，激活一个函数

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，它会变成“无效”，然后再次运行检查。

一个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 {} 
    } 
    } 
});

来源

2014-12-03 ladanta

请添加您的（相关） “[MCVE]（http://stackoverflow.com/help/mcve）” 代码，你的问题，应该与其他网站倒下，失败，删除旧内容或重组，这个问题在没有上下文的情况下变得毫无意义和无用。（此外，这仅仅是作为建议，有一个特定的原因（参考：http://stackoverflow.com/help/on-topic#help-post-body，特别是数字** 1 **，以关闭问题不包括相关的代码） – 2014-12-03 21:15:35

我正在使用的脚本现在已被添加 – ladanta 2014-12-03 21:18:49

将事件委托给文档并使用css选择器来处理需要响应事件的元素 – 2014-12-03 21:21:10

这将检查具有阶级一个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/

来源

2014-12-03 21:30:28

非常感谢，我将努力将其添加到我的脚本中。 – ladanta 2014-12-03 21:38:56

@MarcMurray欢迎你，如果你觉得这回答了你的问题，请接受它作为答案，以便其他人知道这个问题已得到解决。感谢和快乐的编码！ :) – 2014-12-03 21:40:07

在使用这段代码作为上面发布的IF语句的先驱时遇到问题，我希望此代码仅在每个部分内部运行，我是否必须为每个部分做不同的声明？ – ladanta 2014-12-03 22:43:40

如果一个div存在，激活一个函数

回答

相关问题