JavaScript-切换功能

Question

我试图隐藏/显示我在chrome扩展程序中定义的JS函数。

到目前为止，我要隐藏的内容是：

dspan.className = "cExtension";

//Create toggle button:

function createToggleButton(){
    var toggleButton = document.createElement("button");
    toggleButton.innerHTML = "Toggle Overlay";
    toggleButton.id = "Toggle"
    var header = document.getElementById("header");
    header.appendChild(toggleButton);
    toggleExtension();
}

// find all spans and toggle display:

function toggleExtension(){
    var spans = document.getElementsByTagName('span');
    var toggle = function() {    
        for (var i = 0, l = spans.length; i < l; i++) {
            if (spans[i].getAttribute('class') == 'cExtension') 
                if (spans[i].style.display == 'none') spans[i].style.display = '';
                else spans[i].style.display = 'none';
        }
    }
    document.getElementById('Toggle').onclick = toggle;
}

该按钮显示在标题上，但是不可单击。 如果我更改document.getElementById('Toggle').onclick = toggle; 到document.getElementById('Toggle').onclick = alert{"Hello"); 该警报是在非onclick上的页面加载时触发的。 我正在尝试用纯JS完成此操作。 我要去哪里错了？

Answer 1

首先， document.getElementById("Toggle").onclick = alert("Hello"); 会将onclick事件设置为警报功能返回的内容，而不是警报功能本身。 因此，警报功能在页面加载时发生，因此它可以找出返回的内容。 因此，您可以执行以下操作： document.getElementById("Toggle").onclick = function(){alert("Hello");}; 那可能会起作用。

编辑：刮开这里的所有内容：我错过了将toggle变量设置为toggleExtension的函数的toggleExtension 。

我还没有测试过所有内容，因此无法保证在您的特定情况下都能正常使用。

Answer 2

如果设置为可见，则将其删除，否则将其添加

div.classList.toggle("visible");

添加/删除可见，取决于测试条件，我小于10

div.classList.toggle("visible", i < 10 );

确保浏览器支持： http : //caniuse.com/#feat=classlist

Answer 3

为什么不使用jQuery？

它将为您完成所有艰苦的工作。

http://api.jquery.com/toggle/

干杯!