Как показать и скрыть определенные div на странице?

Question

Я пытаюсь показать и скрыть определенные 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> 

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

Оригинал Javascript, который работает в IE11, Safari, Opera, FireFox и Chrome

Это код orignal, который я создал, он работал во всех браузерах, кроме 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> 

Вы помогаете с пониманием.

Answer 1

Я думаю, что вы пытаетесь сделать это:

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

Таким образом, вы itearate над двумя массивами, так что элементы шоу будут показаны и другие скрыты. Проблемы были:

• идентификаторы, если вы используете простые JS, а не CSS или JQuery являются без #
• Правильный синтаксис для массива Массив
• Вы должны перебрать элементы для того, чтобы скрыть/показать каждый из них
• вы должны удалить/скрыть шоу после выбора getElementById, потому что в этом случае вы получаете доступ к свойству внутри этого объекта

Answer 2

Вы смешиваете чистый JS и JQuery.

hide() и show() в Jquery

Итак, для вас: $("#graph-container").hide();

style.display = "none"; в чистом JS

Итак, для вас: document.getElementByid("graph-container").style.display = "none";

разницу между hidden и none: What is the difference between visibility:hidden and display:none?

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

Попробуйте это, используя Javas cript

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

И снова, чтобы показать элемент, вы можете использовать,

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

Небольшая demontration я представил в Snippet. Проверьте, помогает ли это вам.

<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