更改div可見性的Javascript切換按鈕，並切換按鈕文本

如果我可以使用jQuery，這樣做會容易得多，但我試圖避免這樣做，原因有幾個。同時，我已經得到了一些腳本來工作 - 我試圖添加該功能來切換按鈕文本與div的狀態。更改div可見性的Javascript切換按鈕，並切換按鈕文本

<script type="text/javascript"> 
function toggleMe(a){ 
    var e = document.getElementById(a); 
    if(!e) return true; 
    if(e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    return true; 
} 
</script>

該腳本的工作原理，並很好，我目前的按鈕：

<input type="button" onclick="return toggleMe('para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div>

試圖與div可見性狀態的文字切換。我見過的大多數答案都是使用jQuery，我將腳本放入的上下文使得表單成爲非選項。

來源

2012-12-29 Kyle

真正的伎倆是試圖做到這一點將純平'的JavaScript。我正在使用的上下文將會非常簡單，並且必須是模塊化的，所以我想盡可能保持它的獨立性。 – Kyle

看看這有助於：

HTML：

<button id="toggle">Toggle</button> 
<div id="text">Lorem ipsum dolor sit amet.</div>

的JavaScript：

var button = document.getElementById('toggle'), 
    text = document.getElementById('text'); 

button.onclick = function() { 
    var isHidden = text.style.display == 'none'; 
    text.style.display = isHidden ? 'block' : 'none'; 
};

演示：http://jsbin.com/emikux/1/edit

來源

2012-12-29 21:22:12 elclanrs

您可以在回調中使用'this'。 – ThiefMaster

那麼它確實完成了腳本現在所做的事情（以更緊湊的形式），但我試圖解決的真實事情是更改顯示在按鈕內部的文本（示例中的「切換」），以便它每一次從一個文本到另一個文本點擊來回切換;開/關例如。 – Kyle

'button.innerHTML = isHidden？「展開」：「合同」;' – mplungjan

我的JS是有點生疏，我可以」現在檢查一下，但我覺得有點不舒服像這樣會做你想做的事：

<input type="button" onclick="return toggleMe(this,'para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div> 

<script type="text/javascript"> 
    function toggleMe(btn,a){ 
    var e=document.getElementById(a); 
    if(!e)return true; 
    if(e.style.display=="none"){ 
     e.style.display="block"; 
     btn.value = "Hide"; 
    } 
    else{ 
     e.style.display="none"; 
     btn.value = "Show"; 
    } 
    return true; 
    } 
    </script>

修正了間距show/script會顯示。

來源

2012-12-29 22:18:44 catmom

更改div可見性的Javascript切換按鈕，並切換按鈕文本

回答

相關問題