javascript - 显示隐藏 html 元素并更新按钮文本

Question

我不确定以前是否有人问过这个问题，但我对 Javascript 还很陌生，我正在尝试这个例子:

我正在尝试更改字段集的显示/隐藏按钮的文本，但按钮设置按钮文本无法正常工作。

$(window).on("load", function() {
  $('.indoor').slideDown();
  $('.outdoor').slideDown();
});

$(document).ready(function(){
    $(".togOutBtn").click(function(){
        $(".outdoor").toggle(1000);
    });
    $(".togIndorBtn").click(function(){
        $(".indoor").toggle(1000);
    });
});

function btnToggle(elem, text) {
  if (elem.value == "") {
    elem.value = "Hide " + text;
  }

  if (elem.value == "Hide") {
    elem.value = "Show " + text;
    document.getElementById("togOutBtn").innerHTML = elem.value;
  } else {
    elem.value = "Hide " + text;
    document.getElementById("togOutBtn").innerHTML = elem.value;
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button onclick="return btnToggle(this, 'Outdoors');" class="togOutBtn" id="togOutBtn">Hide Outdoors</button>
<fieldset class="outdoor" style="display: none;">
  <legend>Outdoors</legend>
  Temperature:
  <div id="Outtemp"></div>
  Humidity:
  <div id="Outhumid"></div>
  Feels lile:
  <div id="OutheadIndex"></div>
  <button onclick="waterPlant1()">Water the Plant</button>
</fieldset>
<br>
<button onclick="btnToggle(this, 'Indoors');" class="togIndorBtn">Hide Indoors</button>
<fieldset class="indoor" style="display: none;">
  <legend>Drawing Room</legend>
  Temperature: 23* C
  <br>Humidity: 12%
  <br>Feels lile:18* C
  <br>
</fieldset>

此外，第一组户外抖动，而显示隐藏与室内的下一组相比则非常平滑。

Answer 1

这应该可以帮助您更接近您想要实现的目标!如果您有任何疑问，请告诉我。

此方法的优点是，您可以通过将按钮的 id 设置为字段集的 data-bind 来绑定(bind)两个元素。您永远不需要更改 javascript，这将简单地无限扩展。

编辑:添加了验证，以便仅在找到字段集时才尝试对字段集进行操作。巧妙的是，如果您将多个数据绑定(bind)设置为相同的值，现在您还可以将多个字段集绑定(bind)到单个输入。

$('fieldset[data-bind]').slideDown();

$('input[type="button"]').on('click',function(){
  let $id = this.id,
      $this = this;
      $bind= '[data-bind="' + $id + '"]';
  
  if($bind.length){
    $( $bind).toggle(1000,function(){
      $this.value.indexOf('Hide') > -1 ?
         $this.value = $this.value.replace('Hide','Show') :
         $this.value = $this.value.replace('Show','Hide');
    });
  }

});

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

<input type="button" id="outdoorBtn" value="Hide Outdoors">
<fieldset data-bind="outdoorBtn" style="display: none;">
  <legend>Outdoors</legend>
  Temperature:
  <div id="Outtemp"></div>
  Humidity:
  <div id="Outhumid"></div>
  Feels lile:
  <div id="OutheadIndex"></div>
  <button onclick="waterPlant1()">Water the Plant</button>
</fieldset>
<br>
<input type="button" id="indoorBtn" value="Hide Indoors">
<fieldset data-bind="indoorBtn" style="display: none;">
  <legend>Drawing Room</legend>
  Temperature: 23* C
  <br>Humidity: 12%
  <br>Feels lile:18* C
  <br>
</fieldset>