Question

我的身体选择器动态添加了新类st--sticky-header。（滚动后）

我制作了一个jQuery代码，该代码在控制台浏览器中有效，但是此代码仅静态工作。如果我的主体类st--sticky-header将被动态添加，我希望代码可以动态运行。

    $('.filter--facet-container').each(function () {
        if ($(this).children().length <= 5) {
            $(".action--filter-btn").css("display", "none");
            $(".action--sort.action--content.block").css("margin-bottom", "10px");
        }

        if ($(this).children().length <= 4) {
            $(".filter--container-additional").css({
                paddingBottom: "20px",
                height: "125px"
            });

// this code - start

            if ($("body").hasClass("st--sticky-header")) {
                $(".filter--container-additional").css({
                    height: "100px"
                });
            }

            else {
                $(".filter--container-additional").css({
                    height: "125px"
                });
            }

// this code - end
        }
    });

Answer 1

由于只修改CSS，因此无需使用jQuery就可以实现所有这些功能。通过将body添加到选择器，我们使其更加具体，因此它将覆盖.filter--container-additional的先前定义。

只需将以下内容添加到CSS：

.filter--container-additional {
  height: 125px;
}

body.st--sticky-header .filter--container-additional {
  height: 100px;
}

在您的评论中，如果.filter--facet-container有<=个4个孩子（使用jQuery），则可以添加另一个类：

if( $('.filter--facet-container').children() <= 4 )
{
  $('body').addClass('four-or-less');
}

然后按如下所示进一步更新CSS：

body.four-or-less .filter--container-additional {
  height: 125px;
}

body.four-or-less.st--sticky-header .filter--container-additional {
  height: 100px;
}

动态注册jQuery代码（如果我的身体添加div类）

1 个答案: