php - 无法使用 .css 将显示从无更改为阻止

Question

这是我的 CSS:

#optionHotel{
    display:none;
}

这是我的 JavaScript:

function cb1(type){
    switch(type){
        case "hotel":
            alert("hotel");
            $("#optionHotel").css("display","block");
            break;
    }
}

这是我的 HTML:

<div id="optionHotel"> Some Element In here</div>

在“Head Tag”中启动脚本:

<?echo '
<script>window.onload = cb1("'.$orderType.'");</script>
'?>

<!--CSS-->
<link href="../../css/navigate.css" rel="stylesheet"/>
<link href="../../css/reservation.css" rel="stylesheet"/>

将数据从 php 传递到 js 是可以的，因为我已经检查了 In the switchcase

使用alert()可以，但我不知道为什么.css显示阻止不起作用

请指教，先谢了

Answer 1

您的代码:

<script>window.onload = cb1("'.$orderType.'");</script>

将立即调用cb1()函数并尝试将其结果分配给window.onload处理程序。您看到该警报是因为该函数确实运行，但由于它立即从文档头部内部运行，因此文档正文尚未解析，因此脚本无法找到您的元素。

您需要指定一个实际的函数作为处理程序，该函数将在加载时运行，然后调用 cb1():

<script>window.onload = function() { cb1("'.$orderType.'"); };</script>

或者，由于您使用的是 jQuery，并且假设您不想在调用函数之前等待图像加载，请使用文档就绪处理程序:

<?echo '
<script>
  $(document).ready(function() {
     cb1("'.$orderType.'");
  });
</script>
'?>

...或将脚本移至正文末尾并直接调用您的函数:

<?echo '
<script>cb1("'.$orderType.'");</script>
'?>