爲什麼我的數組未定義？

我目前正在做一個個性測驗，它將一個答案值推入一個數組中，在這個數組中，後面我會計算不同的答案值，以確定用戶具有最多/最少的個性特徵。爲什麼我的數組未定義？

但是，當選項的答案值被推入數組時，它是undefined。問題是什麼？

HTML：

<ul data-quiz-question="1"> 
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li> 
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li> 
</ul> 
<ul data-quiz-question="2"> 
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li> 
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li> 
</ul>

JS：

var ansBank = []; 

$('ul[data-quiz-question]').each(function(i){ 
    var $this = $(this), 
     chosenAnswer = $this.find('.quiz-answer.active').data('quiz-answer'); 

    $this.click(function(){ 
     console.log("Chosen option has been pushed."); 
     ansBank.push(chosenAnswer); 
    }); 
});

來源

2017-05-24 LegoCamel

舉動'chosenAnswer = $ this.find（」 quiz-answer.active。「）。數據（」測驗應答'）; '裏面點擊 –

是！謝謝你的訣竅。 – LegoCamel

試試這個：

var ansBank = []; 
 

 
$('ul[data-quiz-question]').each(function(i) { 
 
    var $this = $(this); 
 

 
    $this.click(function() { 
 
    var chosenAnswer = $this.find('.quiz-answer').data('quiz-answer'); 
 
    console.log("Chosen option '" + chosenAnswer + "' has been pushed."); 
 
    ansBank.push(chosenAnswer); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul data-quiz-question="1"> 
 
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li> 
 
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li> 
 
</ul> 
 
<ul data-quiz-question="2"> 
 
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li> 
 
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li> 
 
</ul>

來源

2017-05-24 08:45:42 Sebastian

-1

您必須在UL標籤添加類值這樣

<ul class="data-quiz-question" data-quiz-question="1">

來源

2017-05-24 08:44:57

OP正在使用屬性選擇器，所以不需要類。 – Andii

更好與e.target。沒有嘗試需要使用的各個功能與直線申請$('ul[data-quiz-question]'). click事件，並推動目標元素ATTR到數組

var ansBank = []; 
 

 
$('ul[data-quiz-question]').click(function(e) { 
 
    var chosenAnswer = $(e.target).attr('data-quiz-answer'); 
 
    ansBank.push(chosenAnswer); 
 
    console.log(ansBank) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul data-quiz-question="1"> 
 
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li> 
 
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li> 
 
</ul> 
 
<ul data-quiz-question="2"> 
 
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li> 
 
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li> 
 
</ul>

來源

2017-05-24 08:47:42 prasanth

你您的li元素上沒有任何active類。

所以，我相信你的代碼應該是這樣的：

var ansBank = []; 

$('ul[data-quiz-question]').click(function(){ 
    var $this = $(this), 
    chosenAnswer = $this.find('.quiz-answer').data('quiz-answer'); 
    console.log("Chosen option has been pushed."); 
    ansBank.push(chosenAnswer); 
    //console.log(ansBank); //uncomment if you want to check 
});

JsFiddle

來源

2017-05-24 08:49:13

var ansBank = []; 
 

 
$('ul[data-quiz-question]').click(function(e){ 
 
    var target = $(e.target) 
 
    if(target.hasClass('quiz-answer')){ 
 
     ansBank.push(target.data('quiz-answer')); 
 
     console.log("Chosen option has been pushed."); 
 
     console.log(ansBank) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul data-quiz-question="1"> 
 
    <li class="quiz-answer" data-quiz-answer="2">Blue is my favorite color.</li> 
 
    <li class="quiz-answer" data-quiz-answer="3">Red is my favorite color.</li> 
 
</ul> 
 
<ul data-quiz-question="2"> 
 
    <li class="quiz-answer" data-quiz-answer="3">I like apples.</li> 
 
    <li class="quiz-answer" data-quiz-answer="4">I like oranges.</li> 
 
</ul>

來源

2017-05-24 08:55:59

爲什麼我的數組未定義？

回答

相關問題