Question

我有300个名为cloud1 = cloud300的函数，在300个按钮（按钮名称 - button1-button300）上调用onclick来更改300个文本框的类名为tree1-tree300。如何使用for循环执行此操作。

function cloud1(){document.formname.tree1.className="css"}
function cloud2(){document.formname.tree2.className="css"}
function cloud3(){document.formname.tree3.className="css"}

Answer 1

首先 - 创建一个单击处理程序，无论单击哪个按钮都可以使用 - 这个处理器会找出所提供元素的名称，并用button替换tree：

function clicker(ev) {
    ev = ev || window.event;
    var el = ev.target || ev.srcElement;
    var name = el.getAttribute('name');
    var tree = name.replace('button', 'tree');
    document.formname[tree].className = 'css';
}

然后，在每个按钮上注册相同的处理程序

for (var i = 1; i <= 300; ++i) {
    document.formname['button' + i].onclick = clicker;
}

请参阅http://jsfiddle.net/alnitak/YHv52/进行工作演示。

当然，使用jQuery会更容易，特别是如果你做了正确的事并使用了id属性而不是name属性：

$('form[name="formname"] :button').live(function() {
    var button = this.id;
    var tree = button.replace('button', 'tree');
    $('#' + tree).addClass('css');
});

Answer 2

假设所有功能都是全局的，这应该可行：

for (var i=1; i <= 300; i++) {
  this['cloud'+i].call();
}

但如上所述，请考虑使用一个函数并将参数传递给它。 300个类似的功能是重构的机会。

Answer 3

幸运的是，您不需要为300个元素添加300个事件处理程序。您可以使用event delegation并将仅一个事件处理程序附加到祖先元素（例如<form>），该元素处理所有点击事件并决定要执行的操作。这应该是300x faster。：）

这是一个 demo ，向您展示它是如何运作的。

// add one event handler to the <form>
document.formname.onclick = function(e) {
    // normalize event for IE
    e = e || window.event;
    var target = e.target || e.srcElement;
    // if a button was clicked
    if (target.nodeName.toLowerCase() == 'button') {
        // generate tree name
        var name = target.name.replace('button', 'tree');
        // apply css class for this element
        document.formname[name].className = 'css';
    }
};

注意：假设document.formname位于所有按钮的父链中（可以简单地document）。

Answer 4

您只能编写一个事件处理程序，它将获取按钮的id（设置为处理程序名称，可扩展性）作为参数：

<input type="button" id="cloud1" name="test_1" value="Click me"  onclick="handler(this.id)">

<script>

function handler(handler_id)
{
   this[handler_id].call();
}

Answer 5

只需将输入名称作为参数传递给

function button(inputname){
document.formname.inputname.className='css';
}

javascript代码更改函数名称

5 个答案: