Question

我有一个循环，可以生成随机数和位置，以创建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!");
        }
    }); 
}

Answer 1

您可以省略data-button中的“数据”。

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

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

jQuery API for data()

// in case of multiple data attributes, 
// you get the collection of all data attributes
var clickedButton = $(this).data();
var somethingElse = clickedButton.button;

将clickedButton重命名为buttonData例如......

会更有意义

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

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

然后您可以通过关键字进行检索：

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

或者作为 camelCased 集合：

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()方法作为Clément建议。

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

Answer 2

data函数接受一个键和一个值（如果你指定一个）。关键部分在data-前缀之后，因为前缀是为了确定它是否是数据属性。

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

应更改为：

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

Answer 3

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

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

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

请提供一个示例小提琴，以便我们可以调试并解决问题，如果可能的话。会更容易。

Answer 4

jQuery允许使用$（...）。attr（'name_of_attribute'）来获取任何HTML属性的值。

尝试替换此行：

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

通过这个：

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

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

4 个答案: