[英]How do I show and hide a DIV using this method in Javascript?
我正在嘗試使用一個按鈕顯示和隱藏DIV，該按鈕已編程為使用data-text-swap方法（我在網上找到）來更改文本。 在CSS中，我的DIV設置為“顯示：無”，但我想使用Javascript更改此設置。 我的代碼在做什么錯？
var showMixerBtn = document.getElementById("showMixer"); showMixerBtn.addEventListener("click", showMixerBtnActions); function showMixerBtnActions() { if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); } else { showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); } } var mixerSliders = document.getElementById("mixerSliders"); mixerSliders.addEventListener("click", showMixerActions); function showMixerActions() { if (showMixerBtn.getAttribute("data-text-original")) { mixerSliders.style.display = "block"; } else { mixerSliders.style.display = "none"; } }
div#mixerSliders { display: none; }
<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> <div id="mixerSliders"> <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> </div>
var showMixerBtn = document.getElementById("showMixer"); showMixerBtn.addEventListener("click", showMixerBtnActions); function showMixerBtnActions() { if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); mixerSliders.style.display = "none"; } else { showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); mixerSliders.style.display = "block"; } }
div#mixerSliders { display: none; } .gainSliders { border: 2px inset brown; }
<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> <div id="mixerSliders"> <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> </div>
這將使文本發生變化，並根據需要顯示或隱藏幻燈片。
我做了不同的事情，而不是不使用display none，因為您正在使用jquery，您可以使用toggle函數，它將簡化事情
$(document).ready(function(){ $("#hide").click(function(){ var el = $(this); el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); $("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>
使用javascript在700px之后顯示div后，如何隱藏它？
[英]after using javascript to show a div after 700px how do i hide it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.