Javascript 使用foreach将id/类放入HTML以获得确切值的正确方法是什么？

我已经成功地使用以下代码显示了每个的数据：

<?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

类

控制台。log

仅显示第一个索引项，即使项目值不同。我想我在

input

元素中编写了

class/id

时犯了错误，但我不知道如何放置正确的id/class，以便jQuery能够提取正确的数据。

而不是

$（'.id\u question'）

，

$（'.answer text'）.val（）

和

$（'.user\u id'）

使用

$（this）.查找（'.id\u question'））

，

$（此）.find（'.answer_text'）

和

$（此）.find（'.user_id'）

，因此它将仅限于当前的

。投票李

更正代码：

$('.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);
});

$('.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);
});