如何在Javascript中使用此方法显示和隐藏DIV？

Question

I am trying to show and hide a DIV using a button which I have programmed to change text using the data-text-swap method (which I found online). 我正在尝试使用一个按钮显示和隐藏DIV，该按钮已编程为使用data-text-swap方法（我在网上找到）来更改文本。 My DIV is set to 'display: none' in CSS but I want to change this using Javascript. 在CSS中，我的DIV设置为“显示：无”，但我想使用Javascript更改此设置。 What am I doing wrong in my code? 我的代码在做什么错？

 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>

Answer 1

 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>

This will make the text change and the slide show or hide as appropriate. 这将使文本发生变化，并根据需要显示或隐藏幻灯片。

Answer 2

I did differently , rather than using display none , as you are using jquery you can use toggle function , it will easy up the things 我做了不同的事情，而不是不使用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中使用此方法显示和隐藏DIV？

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-03-23 14:41:24

解决方案2
0 2017-03-23 14:47:07

如何在Javascript中使用此方法显示和隐藏DIV？

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-03-23 14:41:24

解决方案2 0 2017-03-23 14:47:07

解决方案1
1 已采纳 2017-03-23 14:41:24

解决方案2
0 2017-03-23 14:47:07