javascript - 如何仅在首页应用此样式？

Question

我有这个网站:

link

代码 JS:

$('.entry-content').css('height', 100+'vh');
$('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
$(window).on('resize',function(){

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

});

这些功能应该只应用在第一页上。我可以访问不同的 div 样式以仅在首页上应用吗？

我试着把这段代码放进去，但不幸的是没有用......适用于所有页面。

代码 CSS:

article>.entry-content{height:auto !important;}

你能帮我解决这个问题吗？

提前致谢!

编辑:

 if ( window.currentPage == "homepage" ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });
 }

代码在 document.ready 代码中工作，如果你放入调整大小功能不起作用。

Answer 1

不好的方式，

您可以查看仅在首页添加的特定 DOM 元素长度

// #onlyhomepage Only exist DOM on homepage
if ( $("#onlyhomepage").length ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

        $('.entry-content').css('height', 100+'vh');
        $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });

}

好办法，

只需在您的主页上添加一个全局 JavaScript 变量

HTML(主页 HTML)

<script>
    window.currentpage = "homepage";
</script>

JavaScript(外部 Js 文件)

if ( window.currentPage == "homepage" ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

        $('.entry-content').css('height', 100+'vh');
        $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });

}