JavaScript变量外部函数不保留值

JavaScript variable out side function not retaining the value

本文关键字：保留 函数 变量 外部 JavaScript      更新时间：2023-09-26

我对下面的代码有一个问题，我使用onclick属性来调用下面的函数，然后检查哪种类型的数据-attr被传递。然后将其赋值给函数外部的局部变量。但它保存了一个attr，显示为警报，另一个显示为未定义，然后当我点击另一个attr时，它显示它，第一个显示为未定义。

jQuery代码: 
<script>
var attr1 = null;
var attr2 = null;

function createLink(sportAttr) {
    if($(sportAttr).attr("data-provider-sport-id") != typeof undefined && $(sportAttr).attr("data-provider-sport-id") !== false) {
        attr2 = $(sportAttr).attr("data-provider-sport-id");
        //alert(attr2);
    }
    if($(sportAttr).attr("data-main-sport-id") != typeof undefined && $(sportAttr).attr("data-main-sport-id") !== false) {
        attr1 = $(sportAttr).attr("data-main-sport-id");
        //alert(attr1);
    }
    alert(attr1 + " and second attr is " + attr2);
    //it never reaches the next line because for some reason one of the attrs is always null
    if(attr1 != null && attr2 != null) {
        if(confirm("Are you sure you want to create this link")) {
        }
    }
}
</script>
HTML代码:

<i data-provider-sport-id="9" onclick="createLink(this)">Music</i>
<b data-main-sport-id="17" onclick="createLink(this)">Music</b>

当我点击第一个时，它显示"undefined and second attr is 9"。

当我点击第二个时它显示"17 and second attr is undefined"

什么线索吗?

这个检查不正确:

$(sportAttr).attr("data-main-sport-id") != typeof undefined

看，typeof undefined总是字符串 'undefined'(因为typeof总是返回一个字符串)。该语句将为真，除非数据属性恰好是相同的-即字符串'undefined'。

所以您的问题不是保留，而是由于错误配置的if语句而覆盖值的事实。

要解决这个问题，可以使用这个未定义的检查(您可能在第一次尝试过): 
typeof $(sportAttr).attr("data-main-sport-id") !== 'undefined'

或者只是使用不带typeof 的未定义的简单比较(但这不够健壮，所以您使用typeof的直觉本身并不坏):

$(sportAttr).attr("data-main-sport-id") !== undefined

您可以只检查true值，而不是检查属性是否未定义且value是否为false，如下所示-

var attr1 = null;
var attr2 = null;
function createLink(sportAttr) {
    if($(sportAttr).attr("data-provider-sport-id")) {
        attr2 = $(sportAttr).attr("data-provider-sport-id");
        //alert(attr2);
    }
    if($(sportAttr).attr("data-main-sport-id")) {
        attr1 = $(sportAttr).attr("data-main-sport-id");
        //alert(attr1);
    }
    alert(attr1 + " and second attr is " + attr2);
    //it never reaches the next line because for some reason one of the attrs is always null
    if(attr1 != null && attr2 != null) {
        if(confirm("Are you sure you want to create this link")) {
        }
    }
}

希望这对你有帮助!

首先我建议你避免在你的html上设置onclick，这不是一个好的做法。我也改进了你的代码，看看下面:

JS: 

$(document).ready(function(){
    $('.myAction').on('click', function(){
        createLink($(this).data('id'))
    });
});
function createLink(sportAttr) {
    if(typeof sportAttr !== 'undefined') {
        alert(sportAttr);
    }
}
HTML: 

<i class="myAction" data-id="9" data-provider-sport-id="9">Music</i>
<b class="myAction" data-id="17" data-main-sport-id="17">Music</b>

基本上，这个想法是做一个泛型函数，并尝试减少代码，使其更干净，而且你没有正确检查undefined。

if(typeof sportAttr !== 'undefined') {
        alert(sportAttr);
    }

演示我希望这对你有帮助。

删除typeof操作符，typeof undefined为"undefined"

相关文章：