Question

我对javascript很新，并且无法让这些代码正常工作，我不确定是什么，我缺少什么。

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

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

所以不是读'X Y Z'而是显示'A B 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。我会非常适合一些可能指向正确方向的反馈或可能的线索。

Answer 1

您正在使用HTML5 hidden属性，因此您应该撤消该属性。

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

DEMO： http://jsfiddle.net/TEXJp/

如果您要使用style对象，则需要考虑它只报告直接在元素上设置的样式。因此，如果您确实在原始元素上设置了测试，那么您的测试应该是== ""而不是== "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";
    }
}

DEMO： http://jsfiddle.net/TEXJp/1/

Answer 2

修复你的代码：

$(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';
        }
    }

});

只是缺少;和}太多

Answer 3

我稍微改变了你的代码，现在它似乎有用了。

<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代码，将隐藏设置为css属性而不是HTML属性。此外，我切换你的if else块，它工作。我认为style.visibility在你给它一个值之前不会被初始化。它等于null，而不是visible。

Answer 4

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

此外，您的HTML指的是隐藏属性，但您的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;
}

Answer 5

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

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


})

使用getElementsByTagName（）更改所有元素的样式

5 个答案: