Question

我有一小段jQuery，当它们进入视图时，它应该将一次性事件绑定到与选择器匹配的每个元素：

jQuery(document).ready(function($) {   
    if (jQuery.browser.mobile === false) {
         $('.featureswrap img.left').css('opacity', 0).one('inview', function(isInView) {
            if (isInView) {$(this).addClass('animated fadeInLeftBig delayp1');}
        });
        $('.featureswrap img.right').css('opacity', 0).one('inview', function(isInView) {
            if (isInView) {$(this).addClass('animated fadeInRightBig delayp1');}
        });
    }
});

但是，它似乎只绑定到页面上的一个（看似随机的）元素（每个选择器，因此总共两个元素）。起初我以为我误解了＃。;。（）＆＃34;，但我认为不是这样的。 CSS函数适用于与选择器匹配的每个元素，但inView事件仅绑定到每个选择器一个。也许它是＆＃34;这个＆＃34;我是误解，还是别的什么？

这里的一些帮助将不胜感激。该页面不会抛出任何错误，否则将按预期工作。没有任何其他可能干扰事件绑定的JavaScript或甚至与相同元素交互的JavaScript。

Answer 1

通过使用.each将事件附加到每个元素来解决此问题。这是更新的，有效的代码：

jQuery(document).ready(function($) {
    if (jQuery.browser.mobile === false) {
        $('.featureswrap img.left').each(function(index){
            $(this).css('opacity', 0).one('inview', function(isInView) {
                if (isInView) {$(this).addClass('animated fadeInLeftBig delayp1');}
            });
        });
        $('.featureswrap img.right').each(function(index){
            $(this).css('opacity', 0).one('inview', function(isInView) {
                if (isInView) {$(this).addClass('animated fadeInRightBig delayp1');}
            });
        });
    }
});

为什么此事件仅绑定到与选择器匹配的一个元素？

1 个答案: