通過點擊（）獲取jQuery div屬性的值

抱歉模糊的標題。我正在使用jQuery。我在我的應用程序中有一個小場景，我被卡住了。通過點擊（）獲取jQuery div屬性的值

問題：我的腳本中有兩個函數，分別命名爲func1和func2。當用戶點擊div元素時，我想要執行這兩個函數，並且還要訪問這兩個函數中的code屬性的值。

<div id="testId" code="102">Click ME</div>。

代碼：

<html> 
    <body> 
     <div id="testId" code="102">Click ME</div> 
     <script type='text/javascript' src='jquery.js'></script> 
     <script type='text/javascript' src='script.js'></script> 
    </body> 
</html>

的script.js：

var code1 = ""; 
var code2 = ""; 

func1 = function(){ 
    code1 = $(this).attr('code'); 
    alert("code1 is "+code1); 
} 

func2 = function(){ 
    code2 = $(this).attr('code'); 
    alert("code2 is "+code2+'2'); 
} 

$('#testId').click(func1, func2); 
/*$('#testId').click(function(){ 
    func1(); 
    func2(); 
});*/

我要訪問我的兩個功能的code="102"值。我嘗試了兩種方法。首先我想下面的代碼片段：

$('#testId').click(func1, func2);

這僅執行func2。 code屬性的值也被func2訪問。但是func1沒有執行！這個怎麼做？

然後我嘗試了第二種方法。我可以通過使用下面的代碼片斷

$('#testId').click(function(){ 
     func1(); 
     func2(); 
    });

當過的用戶點擊執行對股利的兩種功能，但現在我無法訪問code屬性的值，這是不確定的！我如何訪問func1和func2中code屬性的值？

我知道我可以傳遞參數func1和func2像下面後來訪問值，

$('#testId').click(function(){ 
      func1('value of code'); 
      func2('value of code'); 
     });

但是我正在尋找可能的話不同的解決方案。

最後，我正在尋找一種方法，我可以執行這兩個功能並且還可以訪問code屬性的值。任何建議將不勝感激！

來源

2014-10-16 ρss

首先你要使用.Click()方法，所以如果你使用.click(func1, func2)它希望.click([eventData ], handler)。因爲只執行function2所以它是一個處理程序。

那麼你將需要執行這樣的：

$('#testId').click(function(){ 
     func1(); 
     func2(); 
    });

如果你需要得到的代碼，這是更好的創建一個數據屬性，如：

<div id="testId" data-code="102">Click ME</div> 


    $('#testId').click(function(){ 
     func1.call(this); 
     func2.call(this); 
    }); 

func1 = function(){ console.log($(this).data('code')); 
    code1 = $(this).data('code'); 
    alert("code1 is "+code1); 
}

隨着.call()你送誰在調用該函數。

優勢：

嘛。數據（）attr爲becuse你讀，你會知道它的aditional的paramert，而不是隻有你也許不知道它從何而來代碼的所有數據更好。取消.call保持方法清除參數。

缺點

你需要知道，什麼是呼叫做。也許可以將Vanilla與jQuery混合使用。 :)

LIVE DEMO

來源

2014-10-16 14:27:47

是的，這就是我一直在尋找的。 +1 :)對click（）也是很好的解釋。 – 2014-10-16 14:41:08

這真的是一個範圍問題。一個合適的解決方案可以在http://jsfiddle.net/dboots/dhd0dem7/看到。

在您的代碼中，您引用func1和func2中的$（this）。這些指的是實際的func1和func2範圍，他們不知道「代碼」是什麼。

點擊處理程序中的$（this）實際上是指您點擊的div元素，因此它適合在此處使用。

在jsfiddle中，我們在全局級聲明代碼並將其設置在click處理程序中。

var code; 

$('#testId').click(function() { 
    code = $(this).attr('code'); 

    func1(); 
    func2(); 
});

然後，func1和func2函數能夠在他們認爲合適的時候訪問它。

function func1() { 
    alert('func1 code: ' + code); 
} 

function func2() { 
    alert('func2 code: ' + code); 
}

替代的解決方案

代碼傳遞給各個功能如http://jsfiddle.net/dboots/dhd0dem7/1/看到。

function func1(code) { 
    alert('func1 code: ' + code); 
} 

function func2(code) { 
    alert('func2 code: ' + code); 
} 

$('#testId').click(function() { 
    code = $(this).attr('code'); 

    func1(code); 
    func2(code); 
});

來源

2014-10-16 14:22:30

我在我的問題提到關於傳遞參數與FUNC1和FUNC2。我正在尋找不同的解決方案。 Wilfredo提供了我正在尋找的解決方案。感謝您的回答。 +1 :) – 2014-10-16 14:40:47

您可以將功能綁定到這個

func1.bind(this)(); 
func2.bind(this)();

這樣的價值時，你的函數試圖訪問$（本），它會指向同一個對象的單擊事件

來源

2014-10-16 14:25:25 user2321864

這也有效。謝謝+1 :) – 2014-10-16 14:42:04

通過點擊（）獲取jQuery div屬性的值

回答

相關問題