javascript - 通过 ID 获取元素什么都不做

Question

在我的 PHP 文档中，我从 myDatabase 中提取数据。然后，我继续将数据库中表中的值分配给变量。我知道这个恰好是 $fileLoc1 的变量确实有一个值，因为当我把

echo $fileLoc1; 

它返回一个值，或者在我的例子中是一个文件的 url。基本上，它的作用是告诉用户文件是否可供下载。我有以下代码来检查这个。

if ($fileLoc1 === NULL) { 
    echo "<script>
             document.getElementById ('alert-sng-available').style.display 
                   = 'none !important';
          </script>"; 
    echo "<script>
              document.getElementById ('alert-sng-Navailable').style.display 
                   = 'block !important';
          </script>";
} 

在上面的代码中，#alert-sng-available 是将显示绿色可用 div 和 alert-sng-Navailable 的警报>(不可用)将显示红色 div。

当我第一次将它放入我的 .php 文件时，我没有多想它，因为它有效。 $fileLoc1 不为空，因此使用 div 的原始设置，显示绿色，隐藏红色。但是，如果我稍微编辑一下代码……

if ($fileLoc1 !== NULL) { 
    echo "<script>
              document.getElementById ('alert-sng-available').style.display 
                      = 'none !important';
          </script>"; 
    echo "<script>
              document.getElementById ('alert-sng-Navailable').style.display 
                      = 'block !important';
          </script>";
} 

你能猜出会发生什么吗？没有什么。绝对，绝对没有。下图显示了两次尝试的结果。在第二个代码片段中，绿色的 div 应该消失，被红色的 div 取代。 (是的，我正在使用 Bootstrap ，这就是我使用 !important 的原因，但不管有没有它都不起作用)

一旦我将 if 语句从 === 更改为 !==

，下一张图片将显示 HTML 中的标记

这是在 inspect element 中，清除显示 php 将 !== 等式计算为 true，这是正确的，但现在 javascript 不起作用。

让我们再试一次，但使用 === 等式。有用!没有脚本标签，因为它应该被评估为 false。

我在这里不知所措。

是的，div 标记正确，没有 Bootstrap 不会干扰。 因为 如果我使用“ctrl + shift + i”更改两个 alert-sng div 的属性，它会正常工作!另外，是的，我的 javascript 位于页面底部

显示它可以工作的 gif

Answer 1

您不应该使用 PHP–JS–HTML/CSS 管道。事实上，您可以简单地依靠 PHP 本身来决定页面本身显示/隐藏的内容。

由于您没有在代码中提供任何标记，我将使用一个假设示例。假设您要打印 <p>File available</p>当$fileLoc1变量不为空，并且 <p>File not available</p>否则，我们可以这样做:

<?php
if ($fileLoc1 === NULL) {
    echo '<p>File available</p>';
} else {
    echo '<p>File not available</p>';
}
?>

为了更简洁的示例，您还可以使用 ternary operators ( ?: )，即:

<?php
echo $fileLoc1 === NULL ? '<p>File available</p>' : '<p>File not available</p>';
?>

---

如果您希望这两个标记都存在，以便以后可以使用 JS 操作它们，您甚至可以打印这两个标记，并有条件地指定样式:

<p style="<?php echo $fileLoc1 === NULL ? 'display: none': 'display: block'; ?>">File available</p>
<p style="<?php echo $fileLoc1 === NULL ? 'display: block': 'display: none'; ?>">File not available</p>

在 $fileLoc 的情况下是NULL ，您将获得以下标记:

<p style="display: none">File available</p>
<p style="display: block">File not available</p>