Question

我有来自数据库的项目的动态列表。我使用while循环生成列表并在php中回显它。问题是jQuery以某种方式只识别第一项，尽管我点击了第二项。我希望在ajax调用成功后直接删除点击的项目。

这是我的PHP代码

while ($rowresult = mysqli_fetch_array($result)){
    $id = $rowresult['id'];
    $name = $rowresult['name'];
    $brand= $rowresult['brand'];
    $price = $rowresult['price'];
    $qty = $rowresult['itemQuantity']; 
    $desc = $rowresult['description'];
    $img = $rowresult['itemImage'];

    echo "<div class=\"col-md-12\">";
    echo "<div id=\"cartHeader\" class=\"rowresult cartInfo\">";
    echo "<div class=\"col-md-12\">";
    echo "<input type=\"text\" id=\"idValue\" name=\"idValue\" value=\" $id \"/>";
    echo "<span class=\"remove\"><a href=\"#\" class=\"removeAnchor\">&times;</a></span>";
    echo "<p> $brand $name </p>";
    echo "<div class=\"col-md-4\">";
    echo "<img src=\"$img\" alt=\"Product Image\" width=\"50px\" height=\"50px\"></a>";
    echo "</div>";
    echo "<div class=\"col-md-8\">";
    echo "<span class=\"cartDesc\"> $desc </span> <br>";
    echo "<strong><span class=\"cartDesc\"> RM$price </span></strong>";
    echo "</div>";
    echo "</div>";
    echo "</div>";
    echo "</div>";
}

这是我的jQuery代码

$(".removeAnchor").click(function(event){
event.preventDefault();
var itemID = $('#idValue').val();
var self = $(this);
$.ajax({
  type: 'POST',
  url: 'delete_item.php',
  data: {itemID:itemID},
  success: function(data){
    $("#cartHeader").css({"background" : "red"});
    console.log(itemID);
  }
});
});

这是我的delete_item.php

<?php
$title = "Item Details";

session_start();
include "config.php";

$itemID = $_POST['itemID'];
?>

P.S。我也在使用bootstrap

有人可以告诉我，当我点击第1行以后的项目时，仍然会返回属于第1项的值吗？

非常感谢任何帮助

Answer 1

解决问题的快捷方法是：

var itemID = $(this).parent().find("#idValue").val();

一般情况下，您应该尝试将id属性值保持为与元素的父级相比更广泛的范围。

已编写的jQuery代码未根据单击传递正确的值

1 个答案: