將onclick = call_locker（）事件附加到CSS類

-1

我試圖在WP網站上實現內容鎖定器。我通常會在觸發彈出的元素上添加HTML代碼onclick="call_locker()"。但是，由於我用於構建網站的插件，因此我無法直接訪問HTML。將onclick = call_locker（）事件附加到CSS類

這是按鈕元素我想將call_locker()功能附加到：

<a href="#" target="_self" class="fl-button" role="button"> 
    <span class="fl-button-text">Subscribe!</span> 
</a>

我的本意是通過.onclick觸發事件的call_locker()功能附加到整個.fl-button類。這樣我就可以在我創建的任何其他.fl-button或頁面上全局使用它。

這是我想出了代碼：

(function() { 
    document.getElementsByClassName("fl-button").onclick = function() { 
    call_locker(); 
    }; 
})();

然而，沒有任何反應，當我點擊按鈕:-(

我對Java的，所以我只能希望沒有專家我的語法是正確的，我使用的術語爲後了。

預先感謝您的幫助！

來源

2017-01-08 Pablo González

你不必是一個Java專家，要寫出好的JS（它們是不同的LANGS）...看看到jQuery的委託的事件，或找到手動代表團模式的嘖嘖。簡而言之，您綁定到根並傳遞一個css選擇器，然後過濾引發的事件，並根據需要將它們分配給特定的標記。 – dandavis

'..... me（「fl-button」）[0] .onclick' –

getElementsByClassName返回多個必須迭代的html對象，並將事件偵聽器分配給 – Blauharley

getElementsByClassName返回一個HTMLCollection，這是一個像對象一樣的數組。您需要迭代該對象併爲每個錨標記添加您的事件偵聽器。

Document.getElementsByClassName()

Returns an array-like object of all child elements which have all of the given class names...

您可以使用Array.prototype.forEach來遍歷集合，但在此之前，你必須把它轉換成一個陣列，該陣列可以通過調用[].slice.call(HTMLCollection)來完成。

這裏是一個例子。

var flBtns = document.getElementsByClassName("fl-button"); 
 

 
[].slice.call(flBtns).forEach(function(btn) { 
 
    btn.addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    console.log(e.target); 
 
    // call your locker function here. 
 
    //call_locker() 
 
    }) 
 
})

<a href="#" class="fl-button">FL Button 1</a> 
 
<a href="#" class="fl-button">FL Button 2</a> 
 
<a href="#" class="fl-button">FL Button 3</a> 
 
<a href="#" class="fl-button">FL Button 4</a>

來源

2017-01-08 18:07:53 DavidDomain

將onclick = call_locker（）事件附加到CSS類

回答

相關問題