按钮onclick绑定事件

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 $中)关键字ie

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