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/

干杯!