javascript - 使用 JS 按钮取消嵌入 html 站点中的 php 数组中的单个项目

Question

我的问题是。我想按最后的 remove 按钮并从 session 中删除我的项目。

我该怎么做？

js:

$('.remove button') .click (function() {
removeItem(This);
});

PHP 和 HTML:

   <?php
  foreach($_SESSION["cart"] as $item) {
  $data = getProducts($pdo, $item);
  if ($data["ColorName"] == NULL) {
      $color = "";
  } else {
      $color = "Color: ".$data["ColorName"]."<br>";
  }
  if ($data["Size"] == "") {
      $size = "";
  } else {
      $size = "Size: ".$data["Size"]."<br>";
  }
  print("<div class=\"basket-product\">
    <div class=\"item\">
      <div class=\"product-image\">
        <img src=\"http://placehold.it/120x166\" alt=\"Placholder Image 2\" class=\"product-frame\">
      </div>
      <div class=\"product-details\">
        <h1><strong><span class=\"item-quantity\">1</span> x ".$data["StockItemName"]."</strong></h1>
        <p><strong>".$color." ".$size."</strong></p>
        <p>Product Code - ".$data["StockItemID"]."</p>
      </div>
    </div>
    <div class=\"price\">".$data["RecommendedRetailPrice"]."</div>
    <div class=\"quantity\">
      <input type=\"number\" value=\"1\" min=\"1\" class=\"quantity-field\">
    </div>
    <div class=\"subtotal\">". $data["RecommendedRetailPrice"] * 1 ."</div>
    <div class=\"remove\">
      <button>Remove</button>
    </div>
  </div>");
  } 

我尝试在很多地方使用Unset，但这似乎不起作用:')

Answer 1

:)

解决方案相当简单，但需要一些解释才能理解。

您需要的是:

1. 创建一个新的 php 文件，该文件将获取发布数据(在本例中为元素的 ID)，然后简单地取消设置键(子数组)，其中包含要删除的购物车项目。 您可以使用$key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID'));然后简单地取消设置unset($_SESSION["cart"][$key_to_remove]);
2. 分配id="remove_<?php echo $data["StockItemID"]; ?>"到<div class="basket-product">和data-product-id="<?php echo $data["StockItemID"]; ?>"到按钮，这样您就可以通过 javascript/jquery 识别它以进行项目删除，并且您需要稍后为要从相应 session 数组中删除的项目提取该值(在本例中为 $_SESSION["cart"] )。<
3. 创建删除回调函数 on('click', function(){});
4. 在该函数内提取该值 data-product-id从您刚刚单击的按钮 var stock_item_id=$(this).attr('data-product-id');
5. 在同一函数内，在第 4 步之后，使用第 4 步中的发布数据创建对第 1 步中的文件的 ajax 调用
6. 成功执行 ajax 调用后，删除用 id="remove_<?php echo $data["StockItemID"]; ?>" 标记的相应产品行。在步骤 2 中使用以下代码 $("#remove_"+stock_item_id).remove();

最后，您的代码将如下所示

您的初始 PHP 和 HTML(进行了一些小修正)

<?php 
 foreach($_SESSION["cart"] as $item) {
     $data = getProducts($pdo, $item);
     if ($data["ColorName"] == NULL) {
        $color = "";
     } else {
        $color = "Color: ".$data["ColorName"]."<br>";
     }
    if ($data["Size"] == "") {
        $size = "";
    } else {
        $size = "Size: ".$data["Size"]."<br>";
    }
 ?>
 <div class="basket-product">
    <div class="item">
        <div class="product-image">
            <img src="http://placehold.it/120x166" alt="Placholder Image 2" class="product-frame">
        </div>
        <div class="product-details">
            <h1>
                <strong>
                    <span class="item-quantity">
                        1
                    </span>
                    x <?php echo $data["StockItemName"]; ?>
                </strong>
            </h1>
            <p>
                <strong>
                    <?php echo $color." ".$size; ?>
                </strong>
            </p>
            <p>
                Product Code - <?php echo $data["StockItemID"]; ?>
            </p>
        </div>
    </div>
    <div class="price">
        <?php echo $data["RecommendedRetailPrice"]; ?>
    </div>
    <div class="quantity">
        <input type="number" value="1" min="1" class="quantity-field">
    </div>
    <div class="subtotal">
        <?php echo $data["RecommendedRetailPrice"]; ?> * 1
    </div>
    <div class="remove">
        <button data-product-id="<?php echo $data["StockItemID"]; ?>">
            Remove
        </button>
    </div>
 </div>
<?php
}
?>

JS

$(document).ready(function(){
    $('.remove button').on('click', function() {
        var stock_item_id=$(this).attr('data-product-id');

        $.ajax({
            url: "new_php_file_created_to_remove_item_from_session_via_ajax.php",
            data: 
                {stock_item_id : stock_item_id}
        }).done(function() {
            $("#remove_"+stock_item_id).remove();
        });
    });
});

新 PHP 文件 (new_php_file_created_to_remove_item_from_session_via_ajax.php)

<?php
    $stock_item_id = $_POST['stock_item_id'];
    $key_to_remove = array_search($_POST['stock_item_id'], array_column($_SESSION["cart"], 'StockItemID'));
    unset($_SESSION["cart"][$key_to_remove]);

    if(isset($_SESSION["cart"][$key_to_remove])) {
        return false;
    }
    return true;

为了可读性和进一步的维护以及可能的添加，我强烈建议您将 php、html 和 js 代码分离到单独的文件中，但这只是一个建议。 :)