更改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切换按钮，并切换按钮文本

回答

相关问题