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();
}