php - Ajax .click 从列表中仅选取第一行值

Question

您好，我的 HTML 列表(其中包含链接到 Ajax 脚本的按钮)仅在第一行出现。PHP页面

<?php
$sql="SELECT * FROM scanns WHERE `site` = '$csite' AND `date` BETWEEN '$sdate' AND '$edate' ";
$result_set=mysqli_query($link,$sql);
while($row=mysqli_fetch_array($result_set))
{
?>
    <tr>
    <td><?php echo $row['date']; ?></td>
    <td><?php echo $row['site']; ?></td>
    <td><?php echo $row['file_name']; ?></td>
    <td><a href="scann/<?php echo $row['site']?>/<?php echo $row['file_name'] ?>" target="_blank">view scann</a></td>
    <td>
        <input class='date' type='hidden' value= "<?php echo $row['date']; ?>"/>
        <input class='site' type='hidden' value= "<?php echo $row['site']; ?>"/>
        <input class='filename' type='hidden' value= "<?php echo $row['file_name']; ?>"/>
        <input class="submit"  type="button" value="Delete Scan">
    </td>
    <td>
        <input class="stamp"  type="button" value="Post File">
    </td>
    </tr>
<?php
}
?>
      </table>

Ajax 调用

$(document).ready(function(){
    "use strict";
    $('.submit').click(function(){ 
        var date = $('.date').val();
        var site = $('.site').val();
        var filename = $('.filename').val();
        var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;

         // AJAX Code To Submit Form.
         $.ajax({
             type: "POST",
             url: "cscanndelete.php",
             data: dataString,
             cache: false,
             success: function(result){
                 alert(result);
             }
        });
        return false;
    });
    $('.stamp').click(function(){
        var date = $('.date').val();
        var site = $('.site').val();
        var filename = $('.filename').val();
        var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;

        // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "scanstamp.php",
            data: dataString,
            cache: false,
            success: function(result){
                alert(result);
            }
        });

        return false;
    });
}); 

如果您单击任何按钮，它只会获取第一行的值，不确定如何修复，或者即使我可以。

Answer 1

$('.date').val() 将返回第一个匹配元素的值。由于页面上有许多匹配元素，因此它始终返回第一个表格行。

您处于 $('.submit') 选择器的上下文中，因此您可以使用它作为起点来遍历 DOM 并找到所需的特定元素。像这样的事情:

var date = $(this).closest('tr').find('.date').val();

应该从 this (提交按钮)开始，检查直到包含 tr (其中包含您在本例中查找的所有元素) ，然后在该上下文中找到匹配的元素。只要该父 tr 中只有一个 .date 元素，它就会返回该元素的值。

在您的情况下，您还可以使用 .prev('.date') 之类的内容，或者仅遍历到 td 而不是 tr 等。有多种方法可以实现这一点，具体取决于标记轻微变化时可能需要的鲁棒性。