Javascript 获取要用作比较的数据属性的值？

我有一个循环，生成随机数和位置，以便创建4个用户可以选择的答案

我想要实现的下一步是确定单击按钮的值，同时将其与正确答案的位置进行比较。但是，它不断返回我设置的数据属性，以创建未定义的按钮位置。我不知道为什么会这样

// ===============================================
// BUTTON AND ANSWER GENERATOR
// ===============================================
function numberGenerator(){
    var goodAnswer = 21,
        gaPosition = Math.floor(Math.random() * 4),
        allAnswers = [],
        buttonArea = $("#answerOptions"),
        answer,
        buttonPosition = 0;

    for(n = 0; n < 4; n++) {
        buttonPosition++;
        if(n == gaPosition) {
            answer = goodAnswer;
        } else {
            do {
                answer = Math.floor((Math.random() * 100) + 1);
            } 
            while(answer == goodAnswer || allAnswers.indexOf(answer) !== -1);        
        }

        allAnswers.push(answer);
        input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton" data-button="'+buttonPosition+'">'+ answer +'</button></div>');
        input.appendTo(buttonArea); 
    }

    console.log(allAnswers);
    console.log(gaPosition);

    $(document).on('click', '.answerButton' , function(){
        var clickedButton =  $(this).data('data-button');
        console.log(clickedButton);
        if(clickedButton == gaPosition) {
            alert("Correct!");
        }
        else {
            alert("Incorrect!");
        }
    }); 
}

//===============================================
//按钮和应答发生器
// ===============================================
函数numberGenerator（）{
var goodAnswer=21，
gaPosition=Math.floor（Math.random（）*4），
allAnswers=[]，
buttonArea=$（“#回答选项”），
答复,，
按钮位置=0；
对于（n=0；n<4；n++）{
按钮位置++；
if（n==gaPosition）{
答案=好答案；
}否则{
做{
答案=Math.floor（（Math.random（）*100）+1）；
} 
while（answer==goodAnswer | | allAnswers.indexOf（answer）！==1）；
}
推（回答）；
输入=$（''+回答+''）；
输入。附件（按钮区域）；
}
控制台日志（allAnswers）；
控制台日志（gaPosition）；
$（文档）。在（'click'，'answerButton'，函数（）上{
var clickedButton=$（此）.data（'data-button'）；
控制台日志（点击按钮）；
如果（单击按钮==gaPosition）{
警惕（“正确！”）；
}
否则{
警告（“不正确！”）；
}
}); 
}

jQuery允许使用$（…）.attr（'name\u of_attribute'）获取任何HTML属性的值

尝试替换此行：

var clickedButton=$（this.data（'data-button'）

通过这个：

var clickedButton=$（this.attr（'data-button'）
您可以从
数据按钮中省略“数据”

// getter
var clickedButton = $(this).data('button');

// setter (just to elaborate)
var example = 'string' || 0;
$(this).data('button', example);


例如，将
clickedButton
重命名为
buttonData
会更有意义


另一方面，您还可以将关键字与数据属性相结合

<button data-button-value="1" data-button-action="step2" data-button-valid="true"></button>

或作为一个骆驼套系列：

var buttonData = $(this).data();
var buttonValue = buttonData.buttonValue; // returns an integer
var buttonAction = buttonData.buttonAction; //  returns a string
var buttonValid = buttonData.buttonValid; // returns a boolean


要以字符串形式检索数据属性而不进行任何转换，请使用建议的
attr（）
方法

var buttonValue = $(this).attr('data-button-value'); // returns a string
var buttonAction = $(this).attr('data-button-action'); //  returns a string
var buttonValid = $(this).attr('data-button-valid'); // returns a string

该函数接受一个键和一个值（如果您正在赋值）。关键部分在
数据-
前缀之后，因为前缀在那里，以便确定它是否是数据属性

var clickedButton = $(this).data('data-button');

应改为：

var clickedButton = $(this).data('button');

上述代码示例中可能存在两个问题：


numbergenerator函数中的某些问题可能导致数据按钮值的设置未定义。在这种情况下，您应该检查此设置是否正确


jQuery attr以字符串形式返回属性值。因此，为了进行严格比较，请使用parseInt转换为整数，然后使用===运算符

请提供一个提琴样品，以便我们可以调试和解决问题，如果这是可能的。更简单。
请共享html部分或创建JSFIDDLE。如果有多个属性，会发生什么情况？如果有多个属性，会发生什么情况？：）正如你所说的，因为它是拉一个字符串，它不能做一个数字比较。正如其他人所建议的，我使用.data返回一个整数值。我想了解的唯一问题是，是否存在多个属性。数据能够确定这一点？正如Tim Vermaelen正确指出的，您可以访问不同的数据属性，如下所示：var buttonValue=$（this）.data（'button-value'）；var buttonAction=$（this）.data（'button-action'）；
var clickedButton = $(this).data('data-button');

var clickedButton = $(this).data('button');