2013-06-02 88 views
1

我有一些它激活了一些頁面上的功能,但不知道是否有捷徑,我可以使用,以減少代碼的按鈕:多種功能

的Html :

<button id="button1">button1</button> 
<button id="button2">button2</button> 

JQuery的:

$('#button1').live('click', // click id button1 
    MyCode('#example', function() { 
    this.button1(); // fire button1 function 
    }); 
}); 
$('#button2').live('click', // click id button2 
    MyCode('#example', function() { 
    this.button2(); // fire button2 function 
    }); 
}); 

我的問題是:如果我能在其上可轉移到火點擊裏面坐了同一個名字執行一個功能按鈕的設定值。 ..也許使用.data()?例如,如果我在頁面上有50個按鈕,這可能會節省很多代碼/時間

我已經搜索,但發現信息有點粗略。

回答

4

我的問題是:如果有一個價值,我可以在其上可轉移到火點擊按鈕設置...

你已經在做了:你把一個id上的按鈕:

$(document).on("click", "#button1, #button2", function() { 
    var btn = this; 
    MyCode('#example', function() { 
     this[btn.id](); 
    }); 
}); 

使用on而非棄用(和刪除)live。如果您使用的是舊版本的jQuery,那麼:

$(document).delegate("#button1, #button2", "click", function() { 
    /* ...same content here...*; 
}); 

(注意參數順序on是不同的。)

在任何情況下:關鍵是要關掉按鈕的id

你可能會喜歡把一個類上的按鈕,而不是列出所有id的選擇,例如:

<button id="button1" class="btn">button1</button> 
<button id="button2" class="btn">button2</button> 

而且

$(document).on("click", ".btn", function() { 
    var btn = this; 
    MyCode('#example', function() { 
     this[btn.id](); 
    }); 
}); 

此外,如果你不想要使用id,可以使用data-*屬性:

<button data-func="button1" class="btn">button1</button> 
<button data-func="button2" class="btn">button2</button> 

而且

$(document).on("click", ".btn", function() { 
    var btn = this; 
    MyCode('#example', function() { 
     this[$(btn).attr("data-func")](); 
    }); 
}); 

...但沒有什麼錯誤使用id如果他們是獨一無二的。

+0

傑出!非常感謝,特別是當他們來到你身邊時通過選項。班級和身份證是完美的。基本上允許我添加新的finctions按鈕,就是這樣。再次感謝,非常感謝。 –

+0

只要它讓我接受。 –