顯示隱藏的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>