JQueryで.data（イベント）をログに記録しない

Question

JQueryで.dataイベントを記録するのに問題があります。ここに私のコードです：

私はこのオブジェクトの配列を使用してDOMに追加しています。

var questions= [ 
    { 
    question: 'Areosmith and Run DMC wanted you to do what?', 
    choices: ['Walk this way','Live on a prayer','Dream on'], 
    answer: 'Dream on', 
    gif:  'assets/images/aerosmith.gif', 
    }, 
    { 
    question: 'In 1975 Van McCoy ask you to do what?', 
    choices: ['Stay Alive','Move Side to Side','The Hustle'], 
    answer: 'The Hustle', 
    gif:  'assets/images/hustle.gif', 
    } 
] 

ここでは、オブジェクトごとの選択肢ごとに関数を作成しています。質問が呼び出されると、配列内の各選択肢の "DIV"を作成し、質問と呼ばれるIDに追加します。

function newQuestion(){ 

    for(var i=0; i<questions[currentQuestion].choices.length; i++){ 
    var answerList = $('<div>'); 
    answerList.text(questions[currentQuestion].choices[i]); 
    answerList.addClass('chooseAnswer'); 
    answerList.attr("data-choiceValue",questions[currentQuestion].choices[i]); 
    $('#question').append(answerList); 
} 

$('.chooseAnswer').on('click', function() { 
    pickedAnswer = ($(this).data("data-choiceValue")); 
    console.log(pickedAnswer); 
}); 
} 

私はpickedAnswerをログに記録しようとすると、定義されていません。あなたは私を助けてくれますか？私は必要に応じてより多くの情報を提供することができます。

Answer 1

あなたはattr('data-choiceValue' , 'something')とdataを設定した場合、あなたはdata('choiceValue' , 'something')でdataを設定した場合は、data('choiceValue')

を使用してそれを得ることができ attr('data-choiceValue')

を使用してそれを得ることができ.attr("data-choiceValue")または.data("choiceValue")

を使用してdata属性を取得することができます

var questions= [ 
 
    { 
 
    question: 'Areosmith and Run DMC wanted you to do what?', 
 
    choices: ['Walk this way','Live on a prayer','Dream on'], 
 
    answer: 'Dream on', 
 
    gif:  'assets/images/aerosmith.gif', 
 
    }, 
 
    { 
 
    question: 'In 1975 Van McCoy ask you to do what?', 
 
    choices: ['Stay Alive','Move Side to Side','The Hustle'], 
 
    answer: 'The Hustle', 
 
    gif:  'assets/images/hustle.gif', 
 
    } 
 
]; 
 
var currentQuestion = 0; 
 
newQuestion(); 
 

 
function newQuestion(){ 
 

 
    for(var i=0; i<questions[currentQuestion].choices.length; i++){ 
 
    var answerList = $('<div>'); 
 
    answerList.text(questions[currentQuestion].choices[i]); 
 
    answerList.addClass('chooseAnswer'); 
 
    answerList.attr("data-choiceValue",questions[currentQuestion].choices[i]); 
 
    $('#question').append(answerList); 
 
} 
 

 
$('.chooseAnswer').on('click', function() { 
 
    pickedAnswer = ($(this).attr("data-choiceValue")); 
 
    console.log(pickedAnswer); 
 
}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="question"></div>