为什么这个Javascript没有隐藏HTML项目

Why is this Javascript not hiding the HTML items?

本文关键字：隐藏 HTML 项目 Javascript 为什么      更新时间：2024-02-21

我制作了一个脚本，该脚本应该隐藏HTML列表的某个项目，但它不起作用。我检查了好几次代码，但我找不到它有什么问题。

这是我一直在使用的功能：

  hidecba() {
     var cba = document.getElementById('cba');
     cba.style.display = 'none';
 }
 hidestafe() {
     var stafe = document.getElementById('stafe');
     stafe.style.display = 'none';
 }
 hidebsas() {
     var bsas = document.getElementById('bsas');
     bsas.style.display = 'none';
 }

这就是它应该隐藏的HTML代码：

<ul id="lista1">
    <li id="cba" value="cba" onclick="hidecba()">Córdoba</li>
    <li id="stafe" value="stafe" onclick="hidestafe()">Santa Fe</li>
    <li id="bsas" value="bsas" onclick="hidebsas()">Buenos Aires</li>
</ul>

此外，这里还有一个包含HTML和Javascript的JSFiddle：

https://jsfiddle.net/fxwfran/6vp1ugcb/2/

如果您查看web控制台，您会看到一个错误。（小贴士：使用浏览器提供的工具。）

您缺少单词function:

    function hidecba(){
//  ^^^^^^^^
        var cba = document.getElementById('cba');
        cba.style.display='none';
    }

还有其他各种各样的问题，比如：

<li id="tucu" value="tucu" onclick="function(#tucu)">Tucumán</li>

  1. li元素没有value属性

  2. onclick属性中的JavaScript无效（function不是函数名）

  3. 如果function是一个函数名，则需要在#tucu周围加引号。

  4. 但理想情况下，您只需要使用this，因为它已经引用了元素

以下是使用onxyz处理程序单击列表项时隐藏列表项的一个简单示例：

function hideElement(element) {
  element.style.display = "none";
}
<ul>
  <li onclick="hideElement(this)">Click to hide (1)</li>
  <li onclick="hideElement(this)">Click to hide (2)</li>
  <li onclick="hideElement(this)">Click to hide (3)</li>
  <li onclick="hideElement(this)">Click to hide (4)</li>
</ul>

但我不会为此使用onxyz属性。我建议阅读addEventListener（以及它的微软表亲attachEvent）。

错误

*function* hidecba(){
var cba = document.getElementById('cba');
cba.style.display='none';
}

良好

<ul id="myul">
    <li>click me1</li>
    <li>click me2</li>
    <li>click me3</li>
    <li>click me4</li>
</ul>
var myul=document.getElementById("myul");
    function hideEle(ele){
        ele.style.display='none';
    }
    myul.addEventListener('click',function(e){
        hideEle(e.target)
    });
相关文章：