Question

我有这个网站：

CODE 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样式以仅应用于第一页吗？

我尝试使用此代码，但遗憾的是无效...适用于所有页面。

CODE 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);

    });

}

如何仅在第一页上应用此样式？

1 个答案: