Verwenden der gleichen Funktion mit mehreren Schaltflächen

Question

Ich habe mehrere Schaltflächen, die die OpenPanel-Funktion aufrufen sollte, aber anscheinend nicht Chrome, wenn ich Inline-Event-Handler verwenden. Gibt es Alternativen? Vielen Dank!

Html:

<button id="showBg" class="panelB" onclick="OpenPanel(this)">Btn1</button> 

<button id="showNews" class="panelB" onclick="OpenPanel(this)">Btn2</button> 

JavaScript:

function OpenPanel(elem){ 
alert (elem.id); 
} 

Chrome Fehler:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. 

Answer 1

Mit jquery Sie die Klasse als Selektor und eine Klick-Funktion nutzen könnten ...

HTML :

<button id="showBg" class="panelB">Btn1</button> 
<button id="showNews" class="panelB">Btn2</button> 

JQUERY:

$('button.panelB').click(function() { 
    alert($(this).attr('id')); 
}); 

Wenn Sie aus irgendeinem Grund benötigen OpenPanel Funktion aufzurufen, ist, dass ein DOM-Element anstelle eines jQuery-Objekt erwarten ...

function OpenPanel(elem) { 
    alert(elem.id); 
} 

$('button.panelB').click(function() { 
    OpenPanel(this); 
}); 

Ich hoffe es hilft

Answer 2

Sie können immer noch verwenden:

$(".panelB").click(function(){ 
    {...} 
}); 

$(this) enthält das aktuelle Element, auf das geklickt wurde.

Answer 3

chrome doesn't like it when I use inline event handlers

Chrome hat kein Problem mit Inline-Event-Handlern. Die Fehlermeldung besagt, dass das Problem Ihre Inhaltssicherheitsrichtlinie ist.

Entweder über HTTP-Header oder Meta-Tags haben Sie die Verwendung von Inline-Event-Handlern verboten.

Dies ist wahrscheinlich das Beste. Inline-Event-Handler kommen mit lästigen Fallstricken.

Binden Sie Ihre Ereignishandler stattdessen mit JavaScript.

function openPanelHanler(event) { 
    OpenPanel(this); 
} 

var panels = document.querySelectorAll(".panelB"); 
for (var i = 0; i < panels.length; i++) { 
    panels[i].addEventListener("click", openPanelHander); 
}