Question

我想根据某些条件阻止隐藏<li>元素，所以我尝试了下面的代码。

if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "SLP State Head") {
  document.getElementById('addStore').style.display = "block";
  document.getElementById('deleteStore').style.display = "none";
} else if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "RRSOC Viewer") {
  document.getElementById('addStore').style.display = "none";
  document.getElementById('deleteStore').style.display = "none";
} else {
  document.getElementById('addStore').style.display = "block";
  document.getElementById('deleteStore').style.display = "block";
}

<input type="hidden" id="ContentPlaceHolder1_hndSubGroupName" value="RRSOC Viewer" />
<ul>
  <li id="addStore" class="" href="#" role="button">Add New Store</li>
  <li id="deleteStore" class="" href="#" role="button">Delete Store</li>
  <li class="" href="#" role="button" onclick="return DownloadAllStateReport();">Export Report</li>
  <li class="" role="button" onclick="return DownloadHelpManual();">Help Manual</li>
</ul>

Answer 1

我会回答这个，因为我评论了很多

在元素加载后执行脚本，方法是将脚本放在元素后面或将其包装在onload处理程序中

代码可以简化：

var val   = document.getElementById('ContentPlaceHolder1_hndSubGroupName').value;
var slp   = val = "SLP State Head";
var rrsoc = val = "RRSOC Viewer";
document.getElementById('addStore').style.display = rrsoc ? "none":"block";
document.getElementById('deleteStore').style.display = !slp && !rrsoc ? "block": "none";

<input type="hidden" id="ContentPlaceHolder1_hndSubGroupName" value="RRSOC Viewer" />
<ul>
  <li id="addStore" class="" href="#" role="button">Add New Store</li>
  <li id="deleteStore" class="" href="#" role="button">Delete Store</li>
  <li class="" href="#" role="button" onclick="return DownloadAllStateReport();">Export Report</li>
  <li class="" role="button" onclick="return DownloadHelpManual();">Help Manual</li>
</ul>

Answer 2

您的脚本在加载DOM后执行您需要为该选择列表绑定更改事件以便以后执行操作。试试以下 -

foo();
document.getElementById("ContentPlaceHolder1_hndSubGroupName").onchange = function() {
  foo();
};

function foo() {
  if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "SLP State Head") {
    alert();
    document.getElementById('addStore').style.display = "block";
    document.getElementById('deleteStore').style.display = "none";
  } else if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "RRSOC Viewer") {
    document.getElementById('addStore').style.display = "none";
    document.getElementById('deleteStore').style.display = "none";
  } else {
    document.getElementById('addStore').style.display = "block";
    document.getElementById('deleteStore').style.display = "block";
  }
}

<select id="ContentPlaceHolder1_hndSubGroupName">
  <option value="SLP State Head">SLP State Head</option>
  <option value="RRSOC Viewer">RRSOC Viewer</option>
</select>
<ul>
  <li id="addStore" class="" href="#" role="button">Add New Store</li>
  <li id="deleteStore" class="" href="#" role="button">Delete Store</li>
  <li class="" href="#" role="button" onclick="return DownloadAllStateReport();">Export Report</li>
  <li class="" role="button" onclick="return DownloadHelpManual();">Help Manual</li>
</ul>

Answer 3

尝试在正文部分或页脚部分之后移动您的JS。这是我创建的演示

<!DOCTYPE html>
<html>
<head>

  <title>Hide li</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>


</head>
<body>
<input type="hidden" id="ContentPlaceHolder1_hndSubGroupName" value="RRSOC Viewer" />
<ul>
  <li id="addStore" class="" href="#" role="button">Add New Store</li>
  <li id="deleteStore" class="" href="#" role="button">Delete Store</li>
  <li class="" href="#" role="button" >Export Report</li>
  <li class="" role="button" >Help Manual</li>
</ul>
<script type="text/javascript">
alert(document.getElementById('ContentPlaceHolder1_hndSubGroupName').value);
if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "RRSOC Viewer") {
  document.getElementById('addStore').style.display = "block";
  document.getElementById('deleteStore').style.display = "none";
} else if (document.getElementById('ContentPlaceHolder1_hndSubGroupName').value == "Something value") { // same as above
  document.getElementById('addStore').style.display = "none";
  document.getElementById('deleteStore').style.display = "none";
} else {
  document.getElementById('addStore').style.display = "block";
  document.getElementById('deleteStore').style.display = "block";
}

</script>
</body>
</html>

注意：

编码时请遵循标准，就像所有文档元素都可以在变量的开头定义并在所有地方使用，而不是在任何地方重复。

块none在javascript中不适用于li元素

3 个答案: