javascript - 使用 javascript 隐藏数字，而不使用 jQuery

Question

我有以下小提琴。

当您单击隐藏按钮时，数字 2、3 和 1 被隐藏。使用此 Jquery 代码一切都很好：

$( "#hide" ).click(function() {
   $('span').each(function(){
   if($(this).text().match(/^([1-9])$/))$(this).hide()
});

});

现在我想要同样的东西，但是使用一个很好的旧 javascript 函数而不是上面给出的 jQuery 解决方案。这个怎么做？在这里查看我的（不工作）尝试。

非常感谢

Answer 1

这是一个简单的香草 JS 版本：

function hide() {
    var spans = document.getElementsByTagName('span'), i = 0;
    for(i=0; i<spans.length; i++) {
        spans[i].style.display = (spans[i].innerText.match(/^[1-9]+$/) ? 'none' : '');
    }
}

注意：我已经更正了您的正则表达式以匹配其中超过 1 个数字的数字。

更新小提琴：http: //jsfiddle.net/WnLUu/6/

Answer 2

请试试这个（适用于 IE 和其他浏览器，.innerText 是 IE 特定的）：

function hide() {
    var spans = document.getElementsByTagName('SPAN');

    for (var i=0; i < spans.length; i++) {
        alert(spans[i].textContent);
        if (spans[i].textContent !== undefined && spans[i].textContent.match(/^[1-9]$/))
            spans[i].style.display = 'none';
        else if (spans[i].innerText !== undefined && spans[i].innerText.match(/^[1-9]$/)) // IE
            spans[i].style.display = 'none';
    }
}

Answer 3

在纯 javascript 中，您可以访问 style 属性，因此您可以调用 $(this).hide() 而不是

this.style.visibility = "hidden"

Answer 4

也许是这样的。

function buttonClicked(evt) {
    var spans = document.getElementsByTagName("span");
    for (var i = 0, length = spans.length; i < length; ++i) {
        if (/^([1-9])$/.test(spans[i].innerHTML)) {
             spans[i].style.display = "none";
        }
    }
};


document.getElementById("hide").addEventListener("click", buttonClicked, false);