通过单击()在jQuery中检索div的属性值

很抱歉标题含糊不清。我正在使用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属性的值。任何建议都将不胜感激！

首先，您正在使用.Click()方法，因此，如果您使用.click(func1, func2)，它希望如此。点击（[eventData]，handler）。因为它只执行函数2，所以它是一个处理程序。

好吧，你需要执行像：

$('#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（）属性更好，因为使用你读取的所有数据，你会知道它是一个传统的参数，而只是你可能不知道它来自哪里的代码。取消对.调用的调用可以保持方法中没有参数。

缺点

你需要知道，调用是做什么的。也许把Vanilla和jQuery混合在一起。：）

现场演示

这实际上是一个范围问题。适当的解决方案可以在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);
});

您可以将函数绑定到此的值

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

这样，当函数试图访问$（this）时，它将指向与点击事件中相同的对象

相关内容

最新更新

热门标签：