1

我试图隐藏/显示我在 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 完成这项工作。我哪里错了？

4

3 回答 3

1

首先，document.getElementById("Toggle").onclick = alert("Hello");将 onclick 事件设置为警报函数返回的任何内容，而不是警报函数本身。因此警报功能在页面加载时发生，因此它可以确定要返回的内容。所以你可以这样做：document.getElementById("Toggle").onclick = function(){alert("Hello");};这可能会奏效。

编辑：划掉这里的所有内容：我错过了toggle设置为toggleExtension.

我还没有测试所有这些，所以我不能保证它在你的具体情况下都能正常工作。

于 2013-07-02T17:57:42.720 回答
0

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

div.classList.toggle("visible");

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

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

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

于 2017-07-05T15:04:49.137 回答
-3

为什么不使用 jQuery？

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

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

干杯!

于 2013-07-02T18:10:05.793 回答