Question

我遇到下面的代码问题，我使用onclick属性来调用下面的函数，然后检查传递了哪种类型的data-attr。然后将其分配给函数外部的局部变量。但有些如何保存1 attr并将其显示在警报上并将另一个显示为未定义，然后当我点击另一个attr时它显示它并且第一个显示未定义。我的js和HTML在下面。

jQuery代码：

class MyViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var bottomLabel: UILabel!
    @IBOutlet weak var toTopConstraint: NSLayoutConstraint!

    override func viewDidLayoutSubviews() {
        let heightOfScrollViewContents = (topLabel.frame.origin.y + topLabel.frame.size.height - bottomLabel.frame.origin.y)
        // In my case abs() delivers the perfect result, but you could also check if the heightOfScrollViewContents is greater than 0.
        toTopConstraint.constant = abs((scrollView.frame.height - heightOfScrollViewContents) / 2)
    }

    func refreshContents() {
        // Set the label's text …

        self.view.layoutIfNeeded()
    }
}

HTML code：

<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>

当我点击第一个时，它显示“未定义，第二个attr为9”。

当我点击第二个时，它显示“17并且第二个attr未定义”

任何线索？

Answer 1

此检查不正确：

$(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

Answer 2

不是检查属性是否未定义且值不是false，而是只检查Truthy值，如下所示 -

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")) {

        }

    }

}

希望这有帮助！

Answer 3

首先我建议您不要在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);
    }

DEMO

我希望它有所帮助。

Answer 4

删除typeof运算符，typeof undefined为"undefined"。

JavaScript变量外边函数不保留值

4 个答案: