javascript - 无法在模态中携带正确的行值

Question

我有一个动态表，如下所示

<table class="table table-custom" id="editable-usage">
    <thead>
        <tr>
            <th>ID</th>
            <th>Action</th>
         </tr>
    </thead>
    <tbody>
      <?
         $sql1="SELECT * from `table` where ORDER BY id DESC  LIMIT 10";
         $result1= mysqli_query($con, $sql1);
         if(mysqli_num_rows($result1)>0)
           {
             while($row1 = mysqli_fetch_assoc($result1))
                {   
                <tr class="odd gradeX">
                    <td><? echo $row1['id']; ?></td>
                    <td><div href="#" data-id="<?php echo $row1['id']; ?>" class="btn btn-drank mb-10" id="ListId" data-toggle="modal" data-target="#myModal2">Modal</div></td>
                </tr>
                <?}
            }?>
        </tbody>
    </table>

上表的示例 View 是

ID  Action
1    Modal
2    Modal
3    Modal

从上表单击模态时打开的模态是

  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <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" id="myModalLabel">Details</h4>
                </div>
                <div class="modal-body">
                    <div class="ShowData">
                    </div>
                </div>
            </div>
        </div>
    </div>

我想随身携带 $row['id'];从表格到模态并在 <div class="ShowData"> 内打印.

JS :

$('#ListId').click(function(){
    var Id=$(this).attr('data-id');
    var requestid=$(this).data('requestid');

    $.ajax({url:"viewrequest.php?Id="+Id,cache:false,success:function(result){
        $(".ShowData").html(result);
    }});
});

viewrequest.php :

<?
    $Id=$_GET['Id'];
    echo $Id;
?>

我的要求是(根据上表)
如果我点击第一行模态按钮，那么我应该得到模态内的值应该是 1
如果我点击第二行模态按钮，那么我应该得到模态内的值应该是 2
如果我单击第 3 行模态按钮，那么我应该得到模态内的值应该是 3
但是，每当我从任何行单击模态按钮时，我都会获得值(value)，我会得到 1

谁能告诉我如何更正代码

Answer 1

那是因为你所有的行都有相同的 id ，但 id在同一个文档中应该是唯一的，我认为快速解决这个问题的最干净的方法是替换 id="ListId"通过 class="ListId"并通过 class 附加点击事件选择器:

<td>.... class="ListId btn btn-drank mb-10" data-toggle="modal"...>Modal</div></td>

$('.ListId').click(function(){

看看 Two HTML elements with same id attribute: How bad is it really? .

希望这可以帮助。