jQuery Selector动态ID和儿童课程

Question

我正在尝试在一些动态元素中添加一些滚动效果(通过jQuery添加类(。我只能在第一个(下面的代码(上使用它，或者同时工作(没有：第一选择器(。

只有在唯一元素出现时，才有可能使其在所有＃col-3-xxxx元素上工作？

预先感谢您

jQuery(function() {
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll >= jQuery('[id^=col3]').offset().top - jQuery(window).height()/2.5) {
            jQuery(".col-left:first").addClass("lefter");
            jQuery(".col-right:first").addClass("righter");
        } else {
            jQuery(".col-left:first").removeClass("lefter");
            jQuery(".col-right:first").removeClass("righter");
        }
    });
});

Answer 1

您可以使用：

jQuery("[attribute^='value']")

它选择其attribute的值以value开头的元素，在您的代码中：

$("[id^='col-3']")

更新：

您必须确定是否可见元素，如果是这样，请应用这些类：此方法检查是否在视口中使用Elemnt：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

示例用法：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // add your classes
    } else {
        // remove old classes
    }
})

更新2：根据您的评论，您可以做到这一点：

$(window).on('resize scroll', function() {
    $(".col-left").each(function(index) {
        if ($(this).isInViewport()) {
            $(this).addClass("lefter");
        } else {
            $(this).removeClass("lefter");
        }
    });
    $(".col-right").each(function(index) {
        if ($(this).isInViewport()) {
            $(this).addClass("righter");
        } else {
            $(this).removeClass("righter");
        }
    });
});