无法在模态中携带正确的行值答案

【问题标题】：Unable to carry correct value of row in modal无法在模态中携带正确的行值
【发布时间】：2016-04-15 13:29:28
【问题描述】：

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

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

上表的示例视图是

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);
    }});
});

查看request.php：

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

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

谁能告诉我如何更正代码

【问题讨论】：

id="ListId" 你在复制它，这是无效的。

标签： javascript php jquery mysql mysqli

【解决方案1】：

因为你所有的行都有相同的id，但是id 在同一个文档中应该是唯一的，我认为快速解决这个问题的最干净的方法是用class="ListId" 替换id="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?。

希望这会有所帮助。

【讨论】：

【解决方案2】：

ID 在你的 DOM 中应该是唯一的。为了使它们独一无二，请在您的 HTML 中进行如下更改：

HTML：

<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<? echo $row1['id']; ?>" data-toggle="modal" data-target="#myModal2">Modal</div></td>
 </tr>

JS：

<script>
      $('div[id^=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);
            }});
        });
</script>

在这里，我们创建唯一的 id，在 javascript 中，我们将 click 事件附加到 div，其 id 以 ListId 开头

【讨论】：