通過click（）檢索jQuery中div的屬性值

Question

抱歉，標題含糊。 我正在使用jQuery。 我的應用程序中有一個小場景，被卡住了。

問題：我的腳本中有兩個函數分別稱為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 。 func2也可以訪問code屬性的值。 但是func1沒有執行！ 這個怎么做？

然后我嘗試了第二種方法。 每當用戶點擊div時，我都可以使用以下代碼段執行這兩個功能

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

但是現在我無法訪問code屬性的值，並且它是未定義的！ 如何訪問func1和func2 code屬性的值？

我知道我可以像下面那樣將參數傳遞給func1和func2 ，然后再訪問這些值，

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

但是，如果可能，我正在尋找其他解決方案。

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

Answer 1

這確實是一個范圍問題。 可以在http://jsfiddle.net/dboots/dhd0dem7/中找到適當的解決方案。

在您的代碼中，您正在func1和func2中引用$（this）。 這些是指實際的func1和func2范圍，並且他們不知道什么是“代碼”。

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

在jsfiddle中，我們在全局級別聲明代碼，然后在點擊處理程序中進行設置。

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

Answer 2

首先，您要使用.Click .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（），您可以發送誰正在調用該函數。

優點：

那么.data（）attr更好，因為您讀取的所有數據將使您知道它是附加參數，而僅是您可能不知道其來源的代碼。 取消.call的使用，使方法保持參數清潔。

壞處

您需要知道，電話做什么。 也許將Vanilla與jQuery混合使用。 :)

現場演示

Answer 3

您可以將函數綁定到此值

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

這樣，當您的函數嘗試訪問$（this）時，它將指向與click事件中相同的對象

通過click（）檢索jQuery中div的屬性值

問題描述

3 個解決方案

解決方案1
2 2014-10-16 14:22:30

解決方案2
2 已采納 2014-10-16 14:27:47

解決方案3
1 2014-10-16 14:25:25

通過click（）檢索jQuery中div的屬性值

問題描述

3 個解決方案

解決方案1 2 2014-10-16 14:22:30

解決方案2 2 已采納 2014-10-16 14:27:47

解決方案3 1 2014-10-16 14:25:25

解決方案1
2 2014-10-16 14:22:30

解決方案2
2 已采納 2014-10-16 14:27:47

解決方案3
1 2014-10-16 14:25:25