Ändern von Daten im Bootstrap-Modal

Question

Ich arbeite am Gefährten Spiel, wo ich Fragen in einem Bootstrap-Modal basierend auf der Schaltfläche weitergeleitet übergeben. Die Schaltfläche hat ein Attribut data-num (der Index im Fragenfeld), mit dem der Titel im Modal geändert wird. Er übergibt diesen Index auch als Attribut daten-num an die Entsperrungs-Antwortschaltfläche, die, wenn darauf geklickt wird, den modalen Titel in die Antwort ändert.

Dies funktioniert für die erste Frage, aber wenn ich auf die zweite Frage klicke, wird die richtige Frage geladen, aber die Antwort auf die erste Frage wird geladen, wenn ich den getanswer-Button klicke, obwohl der richtige Index im inspect-Element erscheint unter dem Knopf daten-num. Was mache ich falsch?

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

verwenden (auf der #getAnswer Click-Ereignis):

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

statt

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

Vielleicht weil Sie den Wert mit attr gesetzt, es funktioniert auch, um es so zu erhalten.

Es scheint so, als ob dein Weg funktionieren sollte, aber das habe ich durch Versuche herausgefunden.