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");警报是在页面加载时触发的，而不是单击时触发的。我正在尝试用纯 JS 来完成这个工作。我哪里出错了？

Answer 1

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

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

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