Question

我试图使用一个按钮显示和隐藏DIV，我已经编程使用数据文本交换方法（我在网上找到）更改文本。我的DIV在CSS中设置为'display：none'，但我想用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>

Answer 1

＆＃13;

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

＆＃13;

div#mixerSliders {
			display: none;
		}

.gainSliders {
  border: 2px inset brown;
}

＆＃13;

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

＆＃13;

这将使文本更改，幻灯片显示或隐藏在适当的位置。

Answer 2

我做的不同，而不是使用display none，因为你使用的是jquery，你可以使用切换功能，它会轻松搞定事情

$(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 个答案: