带有属性的Jquery Ajax循环请求问题

Question

我想使用 PHP 循环从数据库中获取两个参赛者的姓名，同时计算每个候选人的总票数并使用 ajax jquery 显示它，但我只获得第一个候选人的票，而另一个候选人没有甚至显示任何东西，甚至不显示 0。

index.php

<h4 class="header-title mb-3">Presidential Result</h4>
<div class="">
   <div class="row text-center">
    <?php
        $sql = "SELECT * FROM contestants WHERE post='president'";
        $query = mysqli_query($conn, $sql);
        while($row=mysqli_fetch_array($query)){
     ?>
      <div class="col-md-6">
        <p class="text-muted mb-0 mt-3" id="contestname"><?php echo $row['fullname']?></p>
         <h2 class="fw-normal mb-3" id="precount">
                                                    
          </h2>
      </div>
   <?php
      }
    ?>                                                
 </div>

index.php 只显示参赛者/候选人的姓名。

Query.js

function view_pres_count(){
    var presname =$('#contestname').html();
    
    $.ajax({
        url: 'prescount.php',
        method: 'post',
        data:{present:presname},
        success: function(data){
            data = $.parseJSON(data);
            $('#precount').html(data.html);
        }
    })

}

在 Query.js 中，我使用标签 ID 将每个名称传递给 presname。此时即使没有 ajax 请求，如果我将 presname 登录到控制台，我也只会得到第一个候选名称。 有什么办法吗？

Answer 1

ID 必须是唯一的。换班去做

const presnames = $('.contestname').map(function() {
  return this.textContent.trim()
}).get()
console.log(presnames)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h4 class="header-title mb-3">Presidential Result</h4>
<div class="">
  <div class="row text-center">
    <div class="col-md-6">
      <p class="text-muted mb-0 mt-3 contestname">
        Jimmy Carter
      </p>
      <h2 class="fw-normal mb-3" class="precount">
      </h2>
    </div>
    <div class="col-md-6">
      <p class="text-muted mb-0 mt-3 contestname">
        Ulyssus Grant
      </p>
      <h2 class="fw-normal mb-3" class="precount">

      </h2>
    </div>
  </div>

您需要提供更多关于您的 precount html 的详细信息，但我建议您返回一个数组并循环

$(".precount").each(function(i) { $(this).html(data[i].html) })