複数のボタンで同じ機能を使用する

Question

OpenPanel関数を呼び出す必要がある複数のボタンがありますが、インラインイベントハンドラを使用すると、クロムはそれを気に入らないようです。選択肢はありますか？ありがとう！

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); 
} 

クロームエラー：あなたは、セレクタとクリック機能としてクラスを使用することができますjQueryを使って

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

...

HTML ：

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

のjQuery：

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

あなたOpenPanel関数を呼び出す必要があるいくつかの理由で、その代わりにjQueryオブジェクトのDOM要素を期待している場合...

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

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

役に立ったら嬉しいです

Answer 2

あなたはまだ使用できます：

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

$(this)には、クリックされた現在の要素が含まれています。

Answer 3

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

Chromeはインラインイベントハンドラに問題はありません。エラーメッセージに、問題がコンテンツセキュリティポリシーであることが示されます。

HTTPヘッダーまたはメタタグのいずれかを使用して、インラインイベントハンドラの使用を禁止しています。

これはおそらく最適です。インラインイベントハンドラには厄介な問題があります。

代わりにJavaScriptを使用してイベントハンドラをバインドします。

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

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