javascript - 使用 foreach 将 id/class 放入 HTML 中以获得确切值的正确方法？

Question

我已经成功地显示了数据，这里是代码:

<?php 
  foreach($jawapan as $row_jawapan):
?>
  <li class="vote-li" >
    <div class="round-button-circle">
      <span></span>
      <h1><?php echo $row_jawapan->answer_text;?></h1>
      <input class="id_answer" type="hidden" value="<?php echo $row_jawapan->id_option;?>">
      <input class="answer_text" type="hidden" value="<?php echo $row_jawapan->answer_text;?>">
    </div>
  </li>
<?php endforeach; ?>

现在我想使用这段代码在用户点击它时获得准确的值:

$('.vote-li').on('click', function(){
  var id_question = $('.id_question').val(),
      answer_text = $('.answer_text').val(),
      user_id = $('.user_id').val(),
      id_option = $(this).prop('id');

  var data = {
    id_question: id_question,
    user_id: user_id,
    id_option: id_option,
    answer_text: answer_text
  };
  console.log(data);
});

现在每次用户点击 vote-li 类时，console.log 只显示第一个索引项，即使项值不同。我想我在 input 元素中写了 class/id 时犯了错误，但我不知道如何放置正确的 id/class 以便我的 jQuery 可以提取正确的数据。

Answer 1

代替 $('.id_question')，$('.answer_text').val() 和 $('.user_id') 使用 $(this).find('.id_question')、$(this).find('.answer_text') 和 $(this ).find('.user_id')，因此它将仅限于当前的 .vote-li。

更正后的代码:

$('.vote-li').on('click', function(){
  var id_question = $(this).find('.id_question').val(),
      answer_text = $(this).find('.answer_text').val(),
      user_id = $(this).find('.user_id').val(),
      id_option = $(this).prop('id');

  var data = {
    id_question: id_question,
    user_id: user_id,
    id_option: id_option,
    answer_text: answer_text
  };

  console.log(data);
});