javascript - 动态运行 jQuery 代码(如果我的主体添加 div 类)

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

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

只需将以下内容添加到您的 CSS 中:

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

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

根据您的评论，您可以添加另一个类，如果 .filter--facet-container有<= 4 个 child 使用 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;
}