通过多个按钮使用相同的功能 | 通过多个按钮使用相同的功能

本文介绍了通过多个按钮使用相同的功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有多个应该调用OpenPanel函数的按钮，但是当我使用内联事件处理程序时，显然chrome不喜欢它.还有其他选择吗?谢谢！

I have multiple buttons that should call the OpenPanel function but apparently chrome doesn't like it when I use inline event handlers. Are there any alternatives? Thanks!

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错误:

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.

推荐答案

使用jquery，您可以将此类用作选择器和单击函数...

With jquery you could use the class as a selector and a click function...

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函数，则该函数期望使用DOM元素而不是jQuery对象...

If for some reason you need to call your OpenPanel function, that is expecting a DOM element instead of a jQuery object...

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

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

我希望对您有帮助

这篇关于通过多个按钮使用相同的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！