Question

在HTML中，我有一个按钮列表。如果用户单击按钮，则将调用doCommand函数。代码如下，

<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>

这是简单的表达，普通的网络程序员会这样编码。但是，出于安全原因，我想隐藏onclick事件及其功能。所以HTML代码就是这样，

<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

有没有有效的方法呢？隐藏onclick财产但做同样的工作。我正在使用jQuery。

Answer 1

所有按钮上的类都应该相同，如下所示：

<li class="button button1"...
<li class="button button2"...

然后，您可以在javascript中执行此操作。

$("li.button").click(function() {
  doCommand('bold');
});

Answer 2

如果你为btns设置了相同的类，你可以很容易地做到：

标记：

<ul>
<li class="button1 clickable" id="bold-button" title="bold">B</li>
<li class="button2 clickable" id="italic-button" title="bold">I</li>
<li class="button3 clickable" id="underline-button" title="bold">U</li>
<li class="button4 clickable" id="strikethrough-button" title="bold">S</li>
</ul>

JS：

$('.clickable').click(function(){/* doCommand('bold') or whatever */})

修改：如果您希望点击直接将文字转换为粗体，则可以使用 this （指的是您点击的元素，您需要将它包装在函数内的jQuery $）关键字中，即

$('.clickable').click(function(){$(this).css('font-weight','bold')})

Answer 3

您可以使用jquery的文档就绪事件来连接事件：

$(function()
{
    $("#bold-button").click(function(){doCommand('bold');});
}
);

Answer 4

在不更改标记和使用vanilla JS的情况下，您可以通过以下方式执行此操作。

＆＃13;

const list = document.querySelector('ul');

list.addEventListener('click', e => {
  if (e.target.classList.contains('button1')) {
    console.log('bold');
  };
  if (e.target.classList.contains('button2')) {
    console.log('italics');
  };
  if (e.target.classList.contains('button3')) {
    console.log('underline');
  };
  if (e.target.classList.contains('button4')) {
    console.log('strikethrough');
  };

})

＆＃13;

<ul>
  <li class="button1" id="bold-button" title="bold">B</li>
  <li class="button2" id="italic-button" title="bold">I</li>
  <li class="button3" id="underline-button" title="bold">U</li>
  <li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

＆＃13;

我将事件分配给父列表，并检查目标的类，允许执行所需的任何操作。

按钮onclick绑定事件

4 个答案: