Question

我目前正在一个网站上工作，该网站的搜索引擎包括带有过滤器的高级搜索选项。我想隐藏过滤器，直到选择了一个类别。我不确定该脚本是否甚至可以在php文件中使用，因为我还尝试了使用简单警报的脚本，但该脚本不起作用。我将此脚本放置在高级搜索选项的php文件的末尾。

<script>

if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}

</script>

custom_fields是div容器的ID，该容器显示具有php生成的内容的所有过滤器。 main_cat是类别的ID，如果值为-1，则不会选择任何类别。如果知道这一点很重要，我正在使用wordpress网站。感谢您的帮助！

Answer 1

我认为您有一个较小的语义错误，导致您的脚本无法按预期运行。另外，要实现<select>的功能行为，您还需要做一些额外的事情，即监听change事件：

<script>

// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")

// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";

// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {

  if (mainCat.value == "-1") 
  {
      customFields.style.display = "none";
  }
  else
  {
      customFields.style.display = "inline";
  }

})

</script>

最后，我看到该脚本实际上在您的网站上已被注释掉。在的正下方，脚本被包含在/* ... */中-请删除脚本以确保脚本能够运行，而不是被浏览器忽略。

希望这会有所帮助！

用脚本隐藏包含php生成内容的div容器

1 个答案: