ブートストラップモーダルのデータを変更する

Question

私はクリックされたボタンに基づいてブートストラップモーダルに質問を渡す危険なゲームに取り組んでいます。このボタンには、属性data-num（質問の配列内のインデックス）があり、これはモーダルのタイトルを変更するために使用されます。また、このインデックスをアトリビュートdata-numとして公開回答ボタンに渡します。クリックボタンをクリックすると、回答のモーダルタイトルが変更されます。

これは最初の質問には当てはまりますが、2番目の質問をクリックすると適切な質問が読み込まれますが、適切なインデックスがinspect要素に表示されてもgetanswerボタンをクリックすると最初の質問に対する回答が読み込まれますアンダーボタンデータ番号。 私は何が間違っていますか？

var questions = [{ 
 
    prompt: "What generic data type should we use when we want to use varying data types for a variable?", 
 
    correctAnswer: "Object", 
 
    }, 
 
    { 
 
    prompt: "Rewrite the following Javascript statment in C#: var flag = true ", 
 
    correctAnswer: "bool flag = true" 
 
    }, 
 
    { 
 
    prompt: "double num1 = 9.34534910;\n int num2= (int)num1;\nSystem.Console.WriteLine(num2);", 
 
    correctAnswer: "9" 
 
    } 
 
]; 
 

 
function showQuestion(event, $modal) { 
 
    var button = $(event.relatedTarget); 
 
    var num = parseInt(button.data('num')); 
 
    var question = questions[num]; 
 
    $modal.find('.modal-title').text(question.prompt); 
 
    $modal.find('.modal-body button').attr('data-num', num) 
 
} 
 

 
$("#myModal").on('show.bs.modal', function(event) { 
 
    showQuestion(event, $(this)); 
 
    } 
 
); 
 

 
$("#myModal").on('hidden.bs.modal', function() { 
 
    $('#myModal').removeData('bs.modal'); 
 
    } 
 
); 
 

 
$("#getanswer").click(function() { 
 
    var num = ($(this).data('num')); 
 
    console.log(num) 
 
    } 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bs-example"> 
 
    <!-- Modal HTML --> 
 
    <div id="myModal" class="modal fade"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
      <p class="modal-title" data-answer="">Modal Window</p> 
 
      <button id="getanswer" type="button" data-num="" class="btn btn-primary clickable">Reveal answer</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="question"> 
 
    <button type="button" class="btn btn-info gridbtn ten" data-toggle="modal" data-target="#myModal" data-num="0">$10</button> 
 
    </div> 
 
    <div class="question"> 
 
    <button type="button" class="btn btn-info gridbtn fifty" data-toggle="modal" data-target="#myModal" data-num="1">$50</button> 
 
    </div> 
 
</div>

Answer 1

使用この（イベントをクリックし#getAnswer上）：代わりに

var num = ($(this).data('num')); 

の

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

おそらく、あなたは、attrを使って値を設定するため、このようにして検索することもできます。

あなたのやり方はうまくいくはずですが、これは試してみたものです。