Question

我试图在我的文档中显示和隐藏某些div 我使用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>

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-->

适用于IE11，Safari，Opera，FireFox和Chrome的原始Javascript

这是我在IE8-10以外的所有浏览器中创建的orignal代码，也许有人可以指导我。

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>

非常感谢您的帮助。

Answer 1

你正在混合纯JS和JQuery。

JQUery中的

hide()和show()

所以，对你而言：$("#graph-container").hide();

纯JS中的

style.display = "none";

所以，对你而言：document.getElementByid("graph-container").style.display = "none";

了解hidden和none之间的区别：What is the difference between visibility:hidden and display:none?

Answer 2

我认为你要做的是：

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";
    };

通过这种方式，您可以迭代两个数组，以便显示show中的元素，并隐藏其他元素。问题是：

如果你使用普通的js而不是css或jQuery的ID没有＃
数组的正确语法是Array
您必须迭代元素才能隐藏/显示每个元素
您必须在getElementById选择之后删除hide / show，因为这样您将访问该Object内的属性

Answer 3

尝试使用它，它应该可以工作。

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

Answer 4

尝试使用javascript

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

再次展示元素，你可以使用，

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

我在Snippet中提交的一个小型的demontration。检查它是否对您有所帮助。

<html>
<body>

<div id="myP">This is a p element.</div>

<button type="button" onclick="myFunction()">Hide content of div</button>
<button type="button" onclick="myFunction1()">Show content of div</button>

<script>
function myFunction() {
    document.getElementById("myP").style.visibility = "hidden";
}
  function myFunction1() {
    document.getElementById("myP").style.visibility = "visible";
}
</script>

</body>
</html>

使用Jquery，您可以使用show()和hide()方法。 JQuery show and hide method

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

4 个答案: