显示隐藏的HTML元素，更新按钮文本

Question

我不知道，如果这个问题已经被问过，但我是很新的Javascript和我是想这个例子：我试图改变显示按钮的文字

/隐藏fieldSet但按钮设置按钮文本不能正常工作。

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

你的问题是内部btnToggle你的if语句：‘它永远不会是隐藏这将是‘

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

在这里，你是说“如果按钮值是’隐藏隐藏户外’。

您解决这个问题要通过这样的：

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

你再拿到声明“如果value =‘隐藏户外’”，而不是“如果值=‘隐藏’”

工作职能：

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

Answer 2

为此，您可以使用切换功能的回调和字段集的知名度，没有必要有一个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'); 
 
\t \t }); 
 
\t }); 
 
}); 
 

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

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

这应该会帮助你更接近你想要完成的事情！请让我知道，如果你有任何问题。

这种方法的优点是通过将按钮的id设置为fieldset的data-bind来绑定这两个元素。你永远不需要改变JavaScript，这将无限地简单地缩放。

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

$('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>

Answer 4

试试这个用正则表达式

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

 
$(document).ready(function(){ 
 
\t var btnOutState = 0; 
 
\t 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 = ""; 
 
\t if(state){ 
 
\t \t pattern = /Hide/g; 
 
\t \t replace = "Show"; 
 
\t }else { 
 
\t \t pattern = /Show/g; 
 
\t \t replace = "Hide"; 
 
\t } 
 
\t 
 
\t newText = $(elem).html(); 
 
\t $(elem).html(newText.replace(pattern, replace)); 
 
}

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