来自列表的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，等等。有很多方法可以做到这一点，这取决于如果标记稍有变化，它可能需要有多健壮。

Answer 2

$('.date').val() 

将始终返回第一个匹配元素的值。如果你想获得被点击元素的值，你可以这样做：

$('submit').click(function(){
  $(this).closest('input').find('.date').val();
  $(this).closest('input').find('.site').val();

... })；