Question

如何在事件点击中查找数据属性的当前值，当我检查控制台日志时，它显示未定义。

这是我的代码。

<li>
<span class="glyphicon connected" data-connected-node="10"></span>
</li>

<li>
<span class="glyphicon connected" data-connected-node="11"></span>
</li>


 var clickCount = 0;
    $('.connected').click(function(e){
        e.preventDefault();
        clickCount++;
        setTimeout(function(){
            if(clickCount == 1) {
                var connectedNode = $(this).attr('data-connected-node');
                console.log(connectedNode); // undefined 
                $('#LoadedEvents').modal({
                    show: true
                });
            }
            if(clickCount > 1) {
                $('#exampleModal').modal({
                    show: true
                });
            }
            clickCount = 0;
        }, 300); // The amount of time between clicks
    });

Answer 1

尝试

$('.connected').click(function(e){
    e.preventDefault();
    clickCount++;
    var connectedNode = $(this).attr('data-connected-node');
    setTimeout(function(connectedNode){
        if(clickCount == 1) {
            console.log(connectedNode); // undefined 
            $('#LoadedEvents').modal({
                show: true
            });
        }
...

这可能是一个范围问题，如果您将属性值作为参数传递而不是尝试在超时处理程序中读取它，则应该解决这个问题。我假设在执行时你的超时处理函数中$(this)将是undefined。

Answer 2

通过预先声明变量中的$(this)元素然后从该变量中收集属性的值来进行测试

HTML

<li>
     <span class="glyphicon connected" data-connected-node="10"></span>
</li>

<li>
     <span class="glyphicon connected" data-connected-node="11"></span>
</li>

的JavaScript

$(document).ready(function() {
   var clickCount = 0;
   $('.connected').click(function(e){
       var thisClass = $(this);
       e.preventDefault();
       clickCount++;
       setTimeout(function(){
           if(clickCount == 1) {
               var connectedNode = thisClass.attr('data-connected-node');
               console.log(connectedNode); // 10 or 11 
               $('#LoadedEvents').modal({
                   show: true
               });
            }
            if(clickCount > 1) {
                $('#exampleModal').modal({
                    show: true
                });
            }
            clickCount = 0;
        }, 300); // The amount of time between clicks
    });
});

Answer 3

我认为如下：

var clickCount = 0;
    $('.connected').click(function(e){
        e.preventDefault();
        clickCount++;
       ***var thisNode = $(this);***
        setTimeout(function(){
            if(clickCount == 1) {
                var connectedNode = ***thisNode*** .attr('data-connected-node');
                console.log(connectedNode); // undefined 
                $('#LoadedEvents').modal({
                    show: true
                });
            }
            if(clickCount > 1) {
                $('#exampleModal').modal({
                    show: true
                });
            }
            clickCount = 0;
        }, 300); // The amount of time between clicks
    });

jquery查找class元素的当前数据值

3 个答案: