Javascript - 具有唯一 ID 和相同类的多个输入，javascript 总是从第一个输入中提取值

Question

我有一个 PHP 循环从包含客户评论的数据库中提取值。每次审核后，都有一个“删除”按钮。

这里是 php 循环

<button type="submit" name="delete" id="delete<?php echo $row4["id"];?>" value="<?php echo $row4["id"];?>" class="btn btn-primary delete" data-filter=".check1">Delete</button>
<div class="deleted<?php echo $row4["id"];?>" id="deleted<?php echo $row4["id"];?>"></div>

下面的脚本从“删除”按钮中获取值并使用 ajax 查询来删除记录。然后显示“已删除”消息。

function delete_recommendation(){
    var action = "fetch_data";
    var id = $(".delete").val();
    $.ajax({
    url: "include/recommendation.php",
    method: "POST",
    data: {id:id},
    success: function(){
    $('#deleted'+id).html('Removed!')
    $('#deleted'+id).addClass('text-danger')
    $('#delete'+id).addClass('d-none')
    }
});
}

$('.delete').click(function(){
    delete_recommendation();
});

我遇到的问题是，如果有多个评论，并且我单击任何删除按钮，它总是会删除列出的第一个评论。我不知道如何使这个独一无二。

提前谢谢你！

Answer 1

您可以尝试从单击的按钮的 id 中获取要删除的行的 id。根据 php，它应该从字符索引 6 开始，紧跟在“删除”之后：

function delete_recommendation( id){
    var action = "fetch_data";
    $.ajax({
    url: "include/recommendation.php",
    method: "POST",
    data: {id:id},
    success: function(){
    $('#deleted'+id).html('Removed!')
    $('#deleted'+id).addClass('text-danger')
    $('#delete'+id).addClass('d-none')
    }
});
}

$('.delete').click(function(event){
   // id="delete<?php echo $row4["id"];?>
    delete_recommendation(event.target.id.substring(6));
});

发布代码的问题在于

$(".delete").val();

gets the current value of the first element in the set of matched elements.