如何按类循环函数事件

How to Loop an function event by class?

本文关键字：事件 函数 循环 何按类      更新时间：2023-09-26

我想通过点击类来循环一个函数。代码如下:

<<p> 类方法/strong>

HTML 

<button class="btn">B</button>
<button class="btn">I</button>
<div id="ctn"></div>
JavaScript 

<script>
var btn = document.getElementsByClassName('btn');
var ctn = document.getElementById('ctn');
ctn.contentEditable = true;
for(i=0; i<btn.length; i++){
var a = ["'bold'","'italic'"];
btn[i].addEventListener('click', function(){
document.execCommand(a[i],false,null);
}, false);}
</script>

点击的时候什么也没发生。使用ID查看手册下面的内容。

<<p> ID方法/strong>

HTML 

<button id="bold">B</button>
<button id="italic">I</button>
<div id="ctn"></div>
JavaScript 

    var bold = document.getElementById('bold');
    var italic = document.getElementById('italic');
    bold.addEventListener('click', function(){document.execCommand('bold',false,null);}, false);
italic.addEventListener('click', function(){document.execCommand('italic',false,null);}, false);

的ID方法是否有效。但是Class不起作用。如何按类循环函数?

注意:用JavaScript而不是JQuery回答这个问题。谢谢你的阅读:)

你需要使用闭包来绑定循环中的元素，像这样:

for(i=0; i<btn.length; i++){
    (function(i) {  //closure inside so i is correct. 
        var a = ["bold","italic"]; //removed quotes
        btn[i].addEventListener('click', function(){
            document.execCommand(a[i],false,null);
        }, false)
    })(i);
}
相关文章：