Question

我想创建一个锁定和解锁2个按钮的脚本。如果显示了div，则锁定按钮“ Toutdéplier”并解锁按钮“ Tout plier”，但是如果div隐藏，则锁定按钮“ tout plier”并解锁按钮“ Tout deplier”。

我的代码，按钮：

<input  type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv()" /> 
<input  type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv()" />

用于显示和隐藏div的JavaScript：

function showDiv() {
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
}

function hideDiv() {
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
}

Answer 1

通过锁定和解锁，我假设是禁用和启用按钮。如果我是正确的，请尝试下面的代码，这可能会有所帮助。

function showDiv($this) {
            enableAllButtons();
            $this.disabled = true;
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
   }
    function hideDiv($this) {
        enableAllButtons();
            $this.disabled = true;
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
  }
  function enableAllButtons(){
      var buttons = document.getElementsByName('answer');
      for(i=0; i<buttons.length; i++)
      {
          var tempButton = buttons[i];
          tempButton.disabled = false;
      }
  }

     <input  type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv(this)" /> 
<input  type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv(this)" />

Answer 2

相应地设置按钮的disabled属性。

function showDiv() {
   document.getElementById('content_caract_1').style.display = "block";
   document.getElementById('content_caract_2').style.display = "block";
   document.getElementById('content_caract_3').style.display = "block";
   document.getElementById('content_caract_4').style.display = "block";
   document.getElementById('btnShow').disabled = true;
   document.getElementById('btnHide').disabled = false;
}
function hideDiv() {
   document.getElementById('content_caract_1').style.display = "none";
   document.getElementById('content_caract_2').style.display = "none";
   document.getElementById('content_caract_3').style.display = "none";
   document.getElementById('content_caract_4').style.display = "none";
   document.getElementById('btnShow').disabled = false;
   document.getElementById('btnHide').disabled = true;
}

<input id="btnHide" type="button" name="answer" class="Button"  value="Tout plier" onclick="hideDiv()" /> 
<input id="btnShow" type="button" name="answer" class="Button" value="Tout déplier" onclick="showDiv()" disabled="true"/>
<div id="content_caract_1">content_caract_1</div>
<div id="content_caract_2">content_caract_2</div>
<div id="content_caract_3">content_caract_3</div>
<div id="content_caract_4">content_caract_4</div>

Answer 3

首先，最好避免使用内联事件onclick，而将click事件附加到JS部分中，而不要使用addEventListener()。

给按钮一个标识符，并给div一个通用类，而不是增加ID（这将为您简化选择器），然后使用一个通用功能来切换显示，例如：

var show_btn = document.querySelector('#show-div-btn');
var hide_btn = document.querySelector('#hide-div-btn');

show_btn.addEventListener('click', toggleDisplay);
hide_btn.addEventListener('click', toggleDisplay);

function toggleDisplay() {
  var display = this.id == 'show-div-btn' ? 'block' : 'none';
  var divs = document.querySelectorAll('.toggled_div');

  show_btn.disabled = (display == 'block');
  hide_btn.disabled = (display == 'none');

  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = display;
  }
}

<input id="hide-div-btn" type="button" name="answer" class="Button" value="Tout plier" />
<input id="show-div-btn" type="button" name="answer" class="Button" value="Tout déplier" />

<div class="toggled_div" id="content_caract_1">content_caract 1</div>
<div class="toggled_div" id="content_caract_2">content_caract 2</div>
<div class="toggled_div" id="content_caract_3">content_caract 3</div>
<div class="toggled_div" id="content_caract_4">content_caract 4</div>

Answer 4

对于禁用按钮，您可以使用disabled attribute。对于单击后的切换按钮，您需要.setAttribute()和.removeAttribute()。

我也建议您不要将onclick属性用于处理点击事件。如果替换onclick上的.addEventListener()会更好。您可以阅读this文档来改进代码。

var btnShow = document.getElementById('showDive');
var btnHide = document.getElementById('hideDive');

btnShow.addEventListener('click', showDiv);
btnHide.addEventListener('click', hideDiv);

function toggleButton(isShowed) {
  if (isShowed) {
    btnShow.setAttribute('disabled', '');
    btnHide.removeAttribute('disabled');
  } else {
    btnHide.setAttribute('disabled', '');
    btnShow.removeAttribute('disabled');
  }
}


function showDiv() {
  document.getElementById('content_caract_1').style.display = "block";
  document.getElementById('content_caract_2').style.display = "block";
  document.getElementById('content_caract_3').style.display = "block";
  document.getElementById('content_caract_4').style.display = "block";
  toggleButton(true);
}

function hideDiv() {
  document.getElementById('content_caract_1').style.display = "none";
  document.getElementById('content_caract_2').style.display = "none";
  document.getElementById('content_caract_3').style.display = "none";
  document.getElementById('content_caract_4').style.display = "none";
  toggleButton(false);
}

<input type="button" name="answer" class="Button" value="Tout plier" id="hideDive"/>
<input type="button" name="answer" class="Button" value="Tout déplier" id="showDive" disabled/>

<div id="content_caract_1">content_caract_1</div>
<div id="content_caract_2">content_caract_2</div>
<div id="content_caract_3">content_caract_3</div>
<div id="content_caract_4">content_caract_4</div>

锁定和解锁按钮

4 个答案: