獲取數據屬性的值用作比較？

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> 

然後，您可以通過關鍵字retreive它：

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 

或者作爲駝峯格式集合：

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 

---

要檢索的數據屬性爲一個字符串，沒有任何企圖轉換它使用Clément建議的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 

Answer 2

jQuery允許通過使用$（...）。attr（'name_of_attribute'）來獲取任何HTML屬性的值。

嘗試通過更換這行：

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

通過這一個：

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

Answer 3

data函數需要一個鍵和一個值（如果你正在分配一個）。關鍵部分在前綴data-之後，因爲前綴在那裏以確定它是否是數據屬性。

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

應改爲：

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

Answer 4

可以有上面的代碼示例中的兩個問題：

---

1. 在numbergenerator功能有些問題可能會導致設置的數據按鈕值變成未定義的。在這種情況下，你應該檢查，如果這是正確設置
   

---

jQuery的ATTR返回屬性作爲字符串的值。因此，爲了進行嚴格比較，請使用parseInt轉換爲整數，然後使用===運算符。

---

請提供樣品小提琴，所以我們可以調試並解決問題，如果這是可能的。會更容易。