时间戳

首页 > 解决方案 > Jquery 选择器动态 ID 和子类

jquery - Jquery 选择器动态 ID 和子类

问题描述

我正在尝试向一些动态元素添加一些滚动效果（通过 jQuery 添加类）。我只能让它在第一个（下面的代码）上工作，或者同时在所有这些上工作（没有 :first 选择器）。

是否有可能使其仅在查看唯一元素时才适用于所有 #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");
        }
    });
});

标签： jquery

解决方案

您可以使用：

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

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

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

更新：

您必须确定元素是否可见，如果是，则应用类：此方法用于检查元素是否在视口中：

$.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");
        }
    });
});

推荐阅读