JavaScript - 切換功能

我試圖隱藏/顯示一個JS函數我已經在Chrome擴展中定義了。JavaScript - 切換功能

我有什麼至今：我試圖隱藏跨度類標籤：

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中完成這件事。我哪裏錯了？

來源

2013-07-02 Yogzzz

這裏工作得很好：http://jsfiddle.net/SdHm9/ –

還可以讓onclick工作。我懷疑這是否是這樣，但有什麼不同，我需要做，因爲這是從一個Chrome擴展？ – Yogzzz

首先，document.getElementById("Toggle").onclick = alert("Hello");會將onclick事件設置爲警報函數返回的內容，而不是警報函數本身。所以警報函數在頁面加載時發生，所以它可以找出返回的內容。所以你可以這樣做：document.getElementById("Toggle").onclick = function(){alert("Hello");};這可能工作。

編輯：這是這裏劃痕的一切：我錯過了toggle變量設置爲一個功能toggleExtension。

我還沒有測試過所有這些，所以我不能保證它會在您的特定情況下工作。

來源

2013-07-02 17:57:42

你有沒有真的調用過toggleExtension函數？如果不是，那麼onclick事件永遠不會被設置。 –

-3

爲什麼不使用jQuery？

它會爲你做所有的辛苦工作。

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

乾杯！

來源

2013-07-02 18:10:05

http://meta.stackexchange.com/a/48195/210016 –

如果可見設置將其刪除，否則將其添加

div.classList.toggle("visible");

添加/刪除可見，根據測試條件，我不到10

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

確保瀏覽器的支持：http://caniuse.com/#feat=classlist

來源

2017-07-05 15:04:49 Muhammed

JavaScript - 切換功能

回答

相關問題