8

我对 javascript 还很陌生，无法让这段代码正常工作，我不确定是什么以及我缺少什么。

所以这就是我想要它做的事情。我正在尝试让脚本读取所有内容并切换在正文中找到的跨度的可见性

<body> 
   <span hidden>A</span>     
   <span>X</span>
   <span hidden>B</span>
   <span>Y</span>
   <span hidden>C</span>
   <span>Z</span>
</body>

因此，它不会读取“XY Z”，而是显示“AB C”

我到目前为止的代码是..

$(function() {

    var elems = document.getElementsByTagName('span');

    for (var i = 0; i<elems.length; i++) {
        if (elems[i].style.visibility == 'visible') {
            elems[i].style.visibility = 'hidden';    
        }
        else {
            elems[i].style.visibility = 'visible';
        }
    }

});

这是我的代码的jsfiddle。我会非常喜欢一些反馈或可能的线索，这些反馈或线索可能会为我指明正确的方向。

4

5 回答 5

14

您正在使用 HTML5hidden属性，因此您应该反转该属性。

for (var i = 0; i<elems.length; i++) {
    elems[i].hidden = !elems[i].hidden;
}

演示：http: //jsfiddle.net/TEXJp/

如果您要使用该style对象，那么您需要考虑它只会报告直接在元素上设置的样式。因此，您的测试应该是 for== ""而不是== "visible"，或者== "hidden"如果您实际上将其设置在原始元素上。

<span style="visibility:hidden;">H</span>   
<span>V</span>

<span style="visibility:hidden;">H</span>
<span>V</span>


var elems = document.getElementsByTagName('span');

for (var i = 0; i < elems.length; i++) {
    if (elems[i].style.visibility === "hidden") {
        elems[i].style.visibility = "visible";
    } else {
        elems[i].style.visibility = "hidden";
    }
}

演示：http: //jsfiddle.net/TEXJp/1/

于 2013-06-27T17:08:11.150 回答
1

如果修复了您的代码：

$(function () {


    var elems = document.getElementsByTagName('span');

    for (var i = 0; i < elems.length; i++) {
        if (elems[i].style.visibility == 'hidden') {
            elems[i].style.visibility = 'visibile';
        } else {
            elems[i].style.visibility = 'hidden';
        }
    }

});

这只是一个失踪;和}太多

于 2013-06-27T17:09:01.247 回答
0

我稍微更改了您的代码，现在它似乎可以工作了。

<body> 
   <span style="visibility: hidden;">A</span>     
   <span>X</span>
   <span style="visibility: hidden;">B</span>
   <span>Y</span>
   <span style="visibility: hidden;">C</span>
   <span>Z</span>
</body>



$(function() {

    var elems = document.getElementsByTagName('span');

    for (var i = 0; i<elems.length; i++) {
        if (elems[i].style.visibility == 'hidden') {
            elems[i].style.visibility = 'visible';    
        }
        else {
            elems[i].style.visibility = 'hidden';
        }
    }

});

问题是您正在使用 html 属性hidden，但您正在修改 css 属性hidden。我更改了您的 HTML 代码以将 hidden 设置为 css 属性而不是 HTML 属性。另外，我切换了您的 if else 块并且它起作用了。我认为 style.visibility 在你给它一个值之前不会被初始化。它等于null，不是visible。

于 2013-06-27T17:18:54.730 回答
-1

您有一些语法错误，包括不匹配的大括号，以及 for 循环定义中的逗号而不是分号。

此外，您的 html 指的是 hidden 属性，但您的 javascript 正在通过样式翻转可见性。

这是一个工作叉。http://jsfiddle.net/yPU2T/1/

var elems = document.getElementsByTagName('span');

for (var i = 0; i < elems.length; i++) {
    elems[i].hidden = !elems[i].hidden;
}
于 2013-06-27T17:14:04.563 回答
-3

您正在使用 jquery，因此无需按照您的方式获取元素

    $(document).ready(function () {
    var elems = $('span.hidden');
    elems.hide();


})
于 2013-06-27T17:12:10.193 回答