Question

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

到目前为止我所拥有的：我试图隐藏的span类是label：

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事件设置为alert函数返回的任何内容，而不是alert函数本身。因此警报功能在页面加载时发生，因此它可以找出返回的内容。所以你可以这样做：document.getElementById("Toggle").onclick = function(){alert("Hello");};这可能有效。

修改：抓取此处的所有内容：我错过了toggle变量设置为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/

干杯！

JavaScript - 切换功能

3 个答案: