通过click（）检索jQuery中div的属性值

Question

Sorry for the vague title. 抱歉，标题含糊。 I am using jQuery. 我正在使用jQuery。 I have a small scenario in my app and I am stuck. 我的应用程序中有一个小场景，被卡住了。

Problem : I have two functions in my script named as func1 and func2 . 问题：我的脚本中有两个函数分别称为func1和func2 。 I want to execute both of these functions when ever an user clicks on the div element and also to access the value of the code attribute in these two functions. 每当用户单击div元素时，我都想执行这两个函数，还要在这两个函数中访问code属性的值。

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

Code : 代码：

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

I want to access the value of code="102" in my two functions. 我想在两个函数中访问code="102"的值。 I tried two ways. 我尝试了两种方法。 First I tried the following snippet: 首先，我尝试了以下代码段：

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

This only executes the func2 . 这仅执行func2 。 The value of the code attribute is also being accessed by func2 . func2也可以访问code属性的值。 But the func1 is not executing! 但是func1没有执行！ How to do this? 这个怎么做？

Then I tried a second way. 然后我尝试了第二种方法。 I am able to execute the both functions when ever an user clicks on the div, by using the following snippet 每当用户点击div时，我都可以使用以下代码段执行这两个功能

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

but now I am unable to access the value of code attribute and it is undefined! 但是现在我无法访问code属性的值，并且它是未定义的！ How can I access the value of the code attribute in func1 and func2 ? 如何访问func1和func2 code属性的值？

I know I can pass the parameters to func1 and func2 like below and later access the values, 我知道我可以像下面那样将参数传递给func1和func2 ，然后再访问这些值，

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

But I am looking for a different solution if possible. 但是，如果可能，我正在寻找其他解决方案。

Finally I am looking for a way by which I can execute both of the functions and also have access to the value of the code attribute. 最后，我正在寻找一种既可以执行这两个功能，又可以访问code属性值的方法。 Any suggestion will be appreciated! 任何建议将不胜感激！

Answer 1

This is an issue of scope really. 这确实是一个范围问题。 A proper solution can be seen at http://jsfiddle.net/dboots/dhd0dem7/ . 可以在http://jsfiddle.net/dboots/dhd0dem7/中找到适当的解决方案。

In your code, you are referencing $(this) inside func1 and func2. 在您的代码中，您正在func1和func2中引用$（this）。 These refer to the actual func1 and func2 scopes and they have no idea what "code" is. 这些是指实际的func1和func2范围，并且他们不知道什么是“代码”。

The $(this) inside the click handler, actually refers to the div element you are clicking on so it's fitting to use it there. 点击处理程序中的$（this）实际上是指您要单击的div元素，因此可以在其中使用它。

In the jsfiddle, we declare code at the global level and set it in the click handler. 在jsfiddle中，我们在全局级别声明代码，然后在点击处理程序中进行设置。

var code;

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

    func1();
    func2();
});

Then the func1 and func2 functions are able to access it as they see fit. 然后func1和func2函数便可以根据需要访问它。

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

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

Alternate Solution 替代解决方案

Pass the code to the individual functions as seen in http://jsfiddle.net/dboots/dhd0dem7/1/ . 如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

First for all you are ussing the .Click() method so, if you use .click(func1, func2) it hopes that .click( [eventData ], handler ) . 首先，您要使用.Click .Click()方法，因此，如果您使用.click(func1, func2)它希望使用.click（[eventData]，handler）。 becouse that only execute the function2 so It's a handlers. 因为只执行function2，所以它是一个处理程序。

Well you will need execute like: 好了，您将需要执行以下命令：

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

If you need get the code, it's much better create a data attribute like: 如果您需要获取代码，则最好创建一个数据属性，例如：

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

With .call() you send who is calling the function. 使用.call（），您可以发送谁正在调用该函数。

Advantage: 优点：

Well the .data() attr is better becuse all data that you read you will know that it's aditional paramert, instead only code you maybe don't know where it comes from. 那么.data（）attr更好，因为您读取的所有数据将使您知道它是附加参数，而仅是您可能不知道其来源的代码。 unsing the .call keep the method clean of parameters. 取消.call的使用，使方法保持参数清洁。

Disadvantage 坏处

You need to know, What does the call do. 您需要知道，电话做什么。 and Maybe mixing Vanilla with jQuery. 也许将Vanilla与jQuery混合使用。 :) :)

LIVE DEMO 现场演示

Answer 3

you can bind your function to the value of this 您可以将函数绑定到此值

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

this way when your function tries to access $(this) it will point to the same object as in the click event 这样，当您的函数尝试访问$（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