show hide html元素和更新按钮文本

Question

我不确定此问题是否曾经被问过，但我对Javascript很新，我正在尝试这个例子：

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

＆＃13;

＆＃13;

$(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;
  }


}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外， Outdoors 的第一个字段集抖动，而show hide与 indoor 中较低的一个相比非常流畅。

Answer 1

这可以帮助您更接近您想要完成的任务！如果您有任何问题，请与我们联系。

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

编辑：添加了验证，以便只有在找到字段集时才尝试对字段集进行操作。如果您将多个数据绑定设置为相同的值，那么现在您还可以将多个字段集绑定到单个输入。

＆＃13;

＆＃13;

$('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');
    });
  }

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的问题是btnToggle中的if语句：

std::shared_ptr

在这里你说“如果按钮值是”隐藏“。它永远不会是隐藏。它将是”隐藏在户外“。

你可以通过以下方式解决这个问题：

if (elem.value == "Hide") {

然后你得到声明“if value ='Hide Outdoors'”而不是“if value ='Hide'”

工作职能：

if (elem.value == "Hide " +text) {

Answer 3

您可以使用切换功能的回调和字段集的可见性来执行此操作，无需在按钮级别具有onclick属性：

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

$(document).ready(function(){
    $(".togOutBtn").click(function(){
        $(".outdoor").toggle(1000, function(){
           showHideFunc('togOutBtn', 'Out');
        });
    });

    $(".togIndorBtn").click(function(){
        $(".indoor").toggle(1000, function(){
           showHideFunc('togIndorBtn', 'In');
		});
	});
});

function showHideFunc(elementClass, inOut)
{
  $("." + elementClass).text(function(){ 
                return ($(this).next('fieldset').is(':visible') ) 
                ? 'Hide ' + inOut + 'doors' : 'Show ' + inOut + 'doors' 
			});
}

#container1
{
  margin-bottom:10px
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container1">
<button  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>
  </div>
  
<div id="container2">
<button 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>
  
   </div>

Answer 4

尝试使用正则表达式

＆＃13;

＆＃13;

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

$(document).ready(function(){
	var btnOutState = 0;
	var btnInState = 0;
    $(".togOutBtn").click(function(){
        $(".outdoor").toggle(1000, function(){btnOutState = !btnOutState; btnChangeValue(".togOutBtn", btnOutState)});
    });
    $(".togIndorBtn").click(function(){
        $(".indoor").toggle(1000, function(){btnInState = !btnInState; btnChangeValue(".togIndorBtn", btnInState)});
    });
});

function btnChangeValue(elem, state) {
var pattern = "";
var replace = "";
	if(state){
		pattern = /Hide/g;
		replace = "Show";
	}else {
		pattern = /Show/g;
		replace = "Hide";
	}
	
	newText = $(elem).html();
	$(elem).html(newText.replace(pattern, replace));
}

＆＃13;

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button 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 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>

＆＃13;

＆＃13;

＆＃13;