关联的PHP MySQL的jQuery Hide Div在While循环中

Question

有问题。 我需要从MySQL查询提供的结果列表中单击按钮，然后删除关联的元素。 单击删除按钮仅隐藏第一张图像。 其余返回的图像什么也不做。

这是我的代码：

PHP：

<?php 
while ($image_row = mysqli_fetch_array($image_result)) { ?>
<span class="listing_image_preview" id="image_<?php echo $image_row['id']; ?>">
<img src="<?php echo $image_row['image_thumb']; ?>" style="border:6px solid #EEE; margin:6px;" />
<button id="remove_image" class="btn btn-default btn-xs" imageId="<?php echo $image_row['id']; ?>">Remove</button>
</span>
<?php
}
?>

jQuery的：

$(document).ready(function() {
    $("#remove_image").click(function() {

        var image_id = $(this).attr('imageId');

        $('#image_'+image_id).hide();
    })
});

Answer 1

您所有的按钮都具有相同的ID：

<button id="remove_image"

而且您的jquery脚本只能通过以下选择器找到一个元素：

$("#remove_image")

这是解决它的一种方法：

1. 将remove_on_click添加到按钮的类中（我也使id成为唯一的）

    <?php 
    while ($image_row = mysqli_fetch_array($image_result)) { ?>
    <span class="listing_image_preview" id="image_<?php echo $image_row['id']; ?>">
    <img src="<?php echo $image_row['image_thumb']; ?>" style="border:6px solid #EEE; margin:6px;" />
    <button id="remove_image_<?php echo $image_row['id']; ?>" class="btn btn-default btn-xs remove_on_click" imageId="<?php echo $image_row['id']; ?>">Remove</button>
    </span>
    <?php
    }
    ?>

2. 在您的jquery脚本中，选择类remove_on_click ：

    $(document).ready(function() {
        $(".remove_on_click").click(function() {

            var image_id = $(this).attr('imageId');

            $('#image_'+image_id).hide();
        })
    });