javascript 代码更改 function 的名称

Question

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

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

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

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

Answer 3

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

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

但正如上面所说，请考虑拥有一个 function 并将 arguments 传递给它。 300 个类似的功能是一个重构的机会。

Answer 4

幸运的是，您不需要为 300 个元素添加 300 个事件处理程序。 您可以使用事件委托并将仅一个事件处理程序附加到处理所有点击事件并决定做什么的祖先元素（例如<form> ）。 这应该快 300 倍。 :)

这是一个演示，向您展示它是如何工作的。

// 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 5

您可以只编写一个事件处理程序，它将按钮的 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();
}