javascript - 将表行 id 附加到 jquery/ajax 函数而不将函数放入循环中

Question

我有一个 php 查询，它循环遍历客户端数据并创建充满客户端行的表。每一行都有一个带有唯一 ID 的链接。单击此链接时，它会消失并根据客户端的 id 运行一个 ajax 函数，并使用来自该客户端的信息打开一个模式。除了会大幅降低页面速度之外，这还行

我遇到的问题是我必须创建一个新循环并循环遍历 ajax 函数调用以及查询循环或者我必须将 ajax 调用放在主函数中环形。有没有一种方法可以在不循环调用 ajax 的情况下捕获链接的 id。我正在做的事情的例子如下。

我真正想尝试做的是单击链接，然后在循环外进行一个获取客户端 ID 的 ajax 调用。离开，获取我需要的信息并填充我的模态。这甚至可能吗？或者调用实际上必须存在于循环中吗？

  <?php for($i=0; $i<count($user); $i++){ ?>
     <tr>
       <td><a href="" id="client-<?php echo $user[$i]['idclient'];?>">name</a></td>
       <td>address</td>
       <td>tel</td>
       <td>contact</td>
    </tr>

<script>
$("#clientName-<?php echo $user[$i]['idclient'];?>).click(function ()
{
    $.ajax(
    {
        type: "GET",
        url: '/includes/scripts/getUserAJ.php',
        cache: false,
        data: {iduser: <?php echo $user[$i]['idclient'];?>},
        success: function (data) 
        {
            $("#div-1").html(data);
            $("#div-2").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClient&i='.$user[$i]['idclient'];?>" class="btn btn-block btn-success"><i class="fa fa-user"></i> View Profile</a>');
            $("#div-3").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientService&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-server"></i> View Service Templates</a>');
            $("#div-4").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientRota&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-calendar"></i> View Client Rota</a>');
            $('#userModal').modal('show'); 

        }
    });

});
</script>


  <?php } ?>



<!-- /.modal Name -->
<div class="modal fade" id="userModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">User Options</h4>
      </div>
      <div class="modal-body">

     <div id="div-1" class="col-sm-6">


     </div>

      <div class="col-xs-12 col-sm-6">

     <div id="div-2" class="col-xs-12">

     </div>
     <div id="div-3" class="col-xs-12">

     </div>

     <div id="div-4" class="col-xs-12">

     </div>


      </div>  
<div class="clearfix"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>
<!-- /.End Modal Name -->

Answer 1

1.创建一个class而不是 id在您的 jQuery 代码中使用它。

2.把<script></script>页面底部的循环外。

3.id 有点变化还需要结构:-

所以代码应该像下面这样:-

<?php for($i=0; $i<count($user); $i++){ ?>
     <tr>
       <td><a href="" id="<?php echo $user[$i]['idclient'];?>" class="clickMe">name</a></td><!-- class added  and id structure is also changed-->
       <td>address</td>
       <td>tel</td>
       <td>contact</td>
    </tr>
<?php } ?>

你的模态 div html 然后

<script>
$(".clickMe").click(function (e){ //check change here
   e.preventDefault(); 
    $.ajax({
        type: "GET",
        url: '/includes/scripts/getUserAJ.php',
        cache: false,
        data: {iduser: $(this).attr('id')}, //check change here
        success: function (data) 
        {
            $("#div-1").html(data);
            $("#div-2").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClient&i='.$user[$i]['idclient'];?>" class="btn btn-block btn-success"><i class="fa fa-user"></i> View Profile</a>');
            $("#div-3").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientService&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-server"></i> View Service Templates</a>');
            $("#div-4").html('<a href="<?php echo $_SERVER['PHP_SELF'].'?viewClientRota&i='.$user[$i]['idclient'];?>" class="btn btn-block mt20 btn-success"><i class="fa fa-calendar"></i> View Client Rota</a>');
            $('#userModal').modal('show'); 
        }
    });
});
</script>

注意:-

1.确保在这段代码之前添加jQuery库

2.脚本代码需要放在页面底部。