如何在JavaScript中使用此方法顯示和隱藏DIV？

我想使用一個按鈕來顯示和隱藏DIV，我已經使用數據文本交換方法（我可以在網上找到）更改文本。我的DIV在CSS中被設置爲'display：none'，但我想用Javascript來改變它。我在代碼中做錯了什麼？如何在JavaScript中使用此方法顯示和隱藏DIV？

var showMixerBtn = document.getElementById("showMixer"); 
 
\t \t showMixerBtn.addEventListener("click", showMixerBtnActions); 
 

 
\t \t function showMixerBtnActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t var mixerSliders = document.getElementById("mixerSliders"); 
 
\t \t mixerSliders.addEventListener("click", showMixerActions); 
 

 
\t \t function showMixerActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-original")) { 
 
\t \t \t \t mixerSliders.style.display = "block"; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t mixerSliders.style.display = "none"; 
 
\t \t \t } 
 
\t \t }

div#mixerSliders { 
 
\t \t \t display: none; 
 
\t \t }

<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> 
 

 
<div id="mixerSliders"> 
 
\t \t <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> 
 
\t </div>

來源

2017-03-23 Alfie Mitchell

哪裏是'mixerSliders'？請添加相關代碼，以複製您的問題。 – Ionut

現在添加道歉 –

您的'mixerSliders'元素默認情況下不會基於CSS顯示。所以，用戶永遠不能觸發這個「mixerSliders.addEventListener（」click「，showMixerActions）;」 – shokulei

var showMixerBtn = document.getElementById("showMixer"); 
 
\t \t showMixerBtn.addEventListener("click", showMixerBtnActions); 
 

 
\t \t function showMixerBtnActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); 
 
     mixerSliders.style.display = "none"; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); 
 
     mixerSliders.style.display = "block"; 
 
\t \t \t } 
 
\t \t }

div#mixerSliders { 
 
\t \t \t display: none; 
 
\t \t } 
 

 
.gainSliders { 
 
    border: 2px inset brown; 
 
}

<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> 
 

 
<div id="mixerSliders"> 
 
\t \t <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> 
 
\t </div>

這將使文本的變化和幻燈片顯示或隱藏合適。

來源

2017-03-23 14:41:24 mikeg542

謝謝你的隊友，這個作品現在完美了！ –

我做了不同的，而不是使用顯示器沒有，因爲你是使用jQuery你可以使用切換功能，它會很容易達到的事情

$(document).ready(function(){ 
 
    $("#hide").click(function(){ 
 
    
 
     
 
    \t \t \t \t \t \t var el = $(this); 
 
    \t \t \t \t \t \t el.text() == el.data("text-swap") 
 
    \t \t \t \t \t ? el.text(el.data("text-original")) 
 
    \t \t \t \t \t : el.text(el.data("text-swap")); 
 
\t \t \t \t 
 
     $("p").toggle(); 
 
     
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
<p>If you click on the "Hide" button, I will disappear.</p> 
 

 
<button id="hide" data-text-swap="Hide" data-text-original="Show">Hide</button> 
 

 

 
</body>

來源

2017-03-23 14:47:07

謝謝，因爲這是uni任務的做法，我只允許使用普通的javascript，但會考慮將來的編碼 –

如何在JavaScript中使用此方法顯示和隱藏DIV？

回答

相關問題