Javascript 如何在页面上显示和隐藏某些div？

我试图在文档中显示和隐藏某些

div

s。
我使用

getElementById

组合了代码，并希望将style.display应用于数组的每个元素。我不确定这是否可能

当前我的代码如下所示：

Javascript

<script>
function chart1() {
    var show = new array ["#chartdiv1", "#unit-price"];
    document.getElementByid("graph-container").show.style.display = "inline";
    var hide = new array ["#chartdiv2", "#unit-price-value",
        "#chartdiv3", "#unit-price-value"];
    document.getElementByid("graph-container").hide.style.display = "none";
};
</script>

功能图1（）{
var show=新数组[“#chartdiv1”，“#单价”]；
document.getElementByid（“图形容器”）.show.style.display=“内联”；
var hide=新数组[“#chartdiv2”，“#单价值”，
“#chartdiv3”、“#单价值”]；
document.getElementByid（“图形容器”）.hide.style.display=“无”；
};

HTML

<div id="graph-container">
    <!-- Unit Price Dollar -->
    <div id="unit-price" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">VPM Global Select Opportunities Fund - Dollar Unit Price
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv1" style="width:100%; height:600px;"></div>
    <!-- Unit Price Dollar Target Return -->
    <div id="unit-price-value" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of $1000 Invested at inception relative to Target Return
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv2" style="width:100%; height:600px;"></div>
    <!-- Unit Price Rand Versus Inflation -->
    <div id="unit-price-rand" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of R1000 Invested at inception relative to Inflation Benchmarks
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv3" style="width:100%; height:600px;"></div>
    <div style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; color: #666; clear: both; margin-top: 20px;">
        <br>* VPM GSO - VPM Global Select Opportunities Fund</div>
    <br>
</div>
<!-- End Graph Container-->

VPM全球选择机会基金-美元单价

每周：2012/02/03至2014/10/24
相对于目标回报，期初投资价值为1000美元

每周：2012/02/03至2014/10/24
相对于通货膨胀基准，期初投资的1000兰特价值

每周：2012/02/03至2014/10/24

*VPM GSO-VPM全球选择机会基金

在IE11、Safari、Opera、FireFox和Chrome中运行的原始Javascript

这是我创建的原始代码，它在除IE8-10之外的所有浏览器中都能工作，也许有人能在这方面指导我

function chart1() {
    document.getElementById("chartdiv1").style.display = "inline";
    document.getElementById("unit-price").style.display = "block";
    document.getElementById("chartdiv2").style.display = "none";
    document.getElementById("unit-price-value").style.display = "none";
    document.getElementById("chartdiv3").style.display = "none";
    document.getElementById("unit-price-rand").style.display = "none";
    };
    </script>

函数图1（）{
document.getElementById（“chartdiv1”）.style.display=“inline”；
document.getElementById（“单价”）.style.display=“块”；
document.getElementById（“chartdiv2”）.style.display=“无”；
document.getElementById（“单价值”）.style.display=“无”；
document.getElementById（“chartdiv3”）.style.display=“无”；
document.getElementById（“单价兰德”）.style.display=“无”；
};

---

非常感谢您的帮助。

您正在混合纯JS和JQuery

JQUery中的

hide（）

和

show（）

因此，对于您来说：

$（“#图形容器”）.hide（）

style.display=“无”

因此，对于您来说：
document.getElementByid（“图形容器”）.style.display=“无”

对于
hidden
和
none
之间的区别：
尝试使用这个，它应该可以工作

document.getElementById("graph-container").style.visibility="visible"; //Show the container
 var hide = new array ["#chartdiv2", "#unit-price-value","#chartdiv3", "#unit-price-value"];
    document.getElementById("graph-container").style.visibility="hidden"; //Hide the container

我认为你想做的是：

function chart1() {
    var show = ["chartdiv1", "unit-price"];
    for ( var i = 0; i < show.length; ++i ) 
         document.getElementById(show[i]).style.display = "inline";
    var hide = ["chartdiv2", "unit-price-value","chartdiv3", "unit-price-value"];
    for ( var i = 0; i < hide.length; ++i ) 
         document.getElementById(hide[i]).style.display = "none";
    };

函数图1（）{
var show=[“chartdiv1”，“单价”]；
对于（变量i=0；i

通过这种方式，可以在两个数组上进行i关联，以便显示show中的元素，隐藏其他元素。
问题是：


如果使用纯js而不是css或jQuery，则ID没有#
array的正确语法是array
为了隐藏/显示每个元素，您必须迭代这些元素
您必须删除getElementById选择后的隐藏/显示，因为这样您就可以访问该对象内部的属性
试试这个，使用javascript

  document.getElementById("<your tag id>").style.visibility = "hidden";

document.getElementById（“”）.style.visibility=“hidden”；

同样，要显示元素，可以使用

  document.getElementById("<your tag id>").style.visibility = "visible";

document.getElementById（“”）.style.visibility=“visible”；

我在片段中提交了一个小的演示。检查它是否对你有帮助



这是一个p元素。
隐藏div的内容
显示div的内容
函数myFunction（）{
document.getElementById（“myP”）.style.visibility=“hidden”；
}
函数myFunction1（）{
document.getElementById（“myP”）.style.visibility=“可见”；
}
您是否可以使用一些与我所寻找的功能相同的jQUERY代码进行指导。如果jQUERY是一个选项，请添加jQUERY标记。我尝试过这段代码，但它似乎不起作用，这是一段很好的代码，并且在逻辑上讲，如果show array大于我，那么它应该显示还是不显示。我甚至在新的数组中尝试了它，并删除了#的，我还可以在这个代码上尝试其他东西吗？我在这个JSFIDLE上尝试了一下，它似乎起了作用：你可以看到只有两个divi，我把我的原始代码添加到了这个问题中，你能告诉我它在IE 8-10中有什么不起作用吗。