本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

使用 JS 按钮取消设置嵌入在 html 网站中的 php 数组中的单个项目

发布于2024-11-04 23:21     阅读(412)     评论(0)     点赞(9)     收藏(2)


我的问题是。我想remove在最后按下那个按钮并从会话中删除我的项目。

我怎样才能做到这一点?

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在很多地方使用,但似乎不起作用:')


解决方案


:)

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

您需要做的是:

  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"]; ?>"按钮,以便您可以通过 javascript/jquery 识别它以删除项目,并且您需要稍后从相应的会话数组中提取要删除的项目的值(在本例中为)。<div class="basket-product">data-product-id="<?php echo $data["StockItemID"]; ?>"$_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 代码分成单独的文件,但这只是一个建议。:)




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/535596/efbae927974ef7ee7bd9/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)