Question

显示/隐藏多个 div

2012-01-24

509

javascript

我使用这个脚本：

    <script language="javascript"> 
function toggle() {
    var ele = document.getElementById("mydiv");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

调用者：

            echo '<a id="displayText" href="javascript:toggle();">show</a>';

我想显示/隐藏几个 div（不在列表或表单中）

我试过：

    var ele = document.getElementById("mydiv", "mydiv2");

但它只显示和隐藏第一个 div

Answer 1

描述

这不是 jQuery。您应该使用 jQuery 函数来保证跨浏览器兼容性。查看我的示例和此 jsFiddle

示例

<div id="mydiv">test</div>
<div id="displayText">test2</div>

$(function() {
    $("#displayText").click(function() {
       $("#mydiv").toggle();
    }); 
});

更多信息

Answer 2

getElementById() 函数接受单个参数，因此您无法向其传递 id 列表。有很多选项，我建议使用其中两个：

使用 div 数组并对其进行迭代，例如

var divs = [ 'mydiv1', 'mydiv2', ... ];
for ( var i = 0; i < divs.length; i++ ) {
var div = document.getElementById( divs[ i ] );
...
}

使用 jQuery 等库，可让您轻松操作项目列表。在这种情况下，您可以用适当的类标记所有 div，例如 myclass ，并使用类似以下内容：
```
$(".myclass").hide()
```

Answer 3

如果您可以在页面中使用包含 jQuery，那么使用 jQuery 代替纯 javascript 可以让您的生活更简单。试试这个

function toggle() {
    var ele = $("#mydiv");
    var text = $("#displayText");
    if(ele.is(':visible')) {
        ele.hide();
        text.html("show");
    }
    else {
        ele.show();
        text.html("hide");
    }
}

如果您想在 jQuyer 中选择多个元素，那么您可以传递用逗号分隔的多个选择器。

var elems = $("#mydiv, #mydiv1, #mydiv2");

elems.show();//Will show all the selected elements
elems.hide();//Will hide all the selected elements