javascript - 更改 Bootstrap 模式中的数据

Question

我正在开发危险游戏，我根据单击的按钮将问题传递到 Bootstrap 模式中。该按钮有一个属性 data-num(问题数组中的索引)，用于更改模式中的标题。它还将此索引作为属性 data-num 传递给显示答案按钮，单击该按钮时，会将模式标题更改为答案。

这适用于第一个问题，但是当我单击第二个问题时，会加载正确的问题，但是当我单击 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).attr('data-num'));

而不是

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

也许由于您使用 attr 设置了值，因此也可以通过这种方式检索它。

看起来你的方法应该可行，但这是我通过尝试发现的。