根據html元素ID的名稱執行JQuery函數

我正在創建一個網頁，其中有3個元素，每個都有它們的ID，在腳本部分我有3個函數，它們的名稱與html ID相同..我想對元素的點擊執行相應的功能..以下是我的代碼:(fiddle）根據html元素ID的名稱執行JQuery函數

HTML：

<div id="one" class="btn"> 
    Click here for 1 
</div> 
<div id="two" class="btn"> 
    Click Here for 2 
</div> 
<div id="three" class="btn"> 
    Click Here for 3 
</div>

JQ：

$('.btn').on('click',function(){ 
    $(this).attr('id')() //here I want to run function 
}); 
function one(){alert("one clicked")} 
function two(){alert("two clicked")} 
function three(){alert("three clicked")}

請幫助.. I D on't想使用if語句......我想這樣做是最優化的方式.. :) 這裏是fiddle

來源

2013-06-27 Bharat Soni

的另一種方式：

來源

2013-06-27 16:34:46

首先聲明函數（1,2和3）並不是更好嗎？我錯了嗎？ –

@NDLombardi你是對的，但在這裏，因爲函數被稱爲內部點擊處理程序，它並不重要 –

我明白了。好的，tks。 –

鏈接定義功能，像下面的對象，

var myFunc = { 
    one: function(){alert("one clicked")}, 
    two: function(){alert("two clicked")}, 
    three: function(){alert("three clicked")} 
};

現在處理程序內調用，

myFunc[this.id](); //Note: this.id is good and better than $(this).attr('id')

來源

2013-06-27 16:30:17

@喬謝謝，錯了sed那。 –

+1，這是「正確的」答案。不需要'eval'。 –

您可以使用eval：

eval($(this).attr('id'));

注意：在使用此方法之前，您需要閱讀有關eval。使用窗口全局對象http://jsfiddle.net/RFANE/

來源

2013-06-27 16:30:32 Ron

感謝至少承認'eval'是壞的。 –

$('.btn').on('click',function(){ 
    eval($(this).attr('id'))(); 
});

來源

2013-06-27 16:32:38

真的嗎？ 'eval'。你*可以*做到這一點，但我會建議反對它。 –

我同意你的看法，但在某些情況下，如果你真的信任源代碼，你可以使用'eval' –

好吧，試試這個：

var theFunctions = { 
     one: function() { alert("one clicked"); }, 
     two: function() { alert("two clicked"); }, 
     three: function() { alert("three clicked"); }, 
}; 

$('.btn').on('click',function(){ 
    theFunctions[$(this).attr('id')](); //here I want to run function 
});

你可以檢查出來

DEMO

$('.btn').on('click',function(){ 
     window[this.id](); //here I want to run function    
}); 
one = function(){alert("one clicked")} 
two = function(){alert("two clicked")} 
three = function(){alert("three clicked")}

來源

2013-06-27 16:34:35

根據html元素ID的名稱執行JQuery函數

回答

相關問題