Question

我制作了一个脚本，该脚本应该隐藏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/

Answer 1

如果您查看Web控制台，则会在那里看到错误。（重要提示：使用浏览器为您提供的工具。）

您遗漏了function：

这个词

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

这个小提琴还有各种其他问题，例如：

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

li元素没有value属性
onclick属性中的JavaScript无效（function不是函数名称）
如果function是函数名称，则需要#tucu左右的引号。
但理想情况下，您只需使用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）。

Answer 2

<强>为

*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) });

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

2 个答案: