Question

我是JS的新手，我正在一个项目中，我需要使用JavaScript来实现一个简单的购物车。

我使用PHP从数据库中获取产品并使用以下代码显示它们：

<div class="col-lg-10 item">
            <?php
            $return = $dbObject ->getProduce('fruits', 3);

            foreach( $return as $key =>$row){
                $id = $row['produce_id'];
                $stock = $row['produce_available'];
                $name = $row['produce_name'];
                $unit = $row['produce_unit'];
                $price = $row['produce_unit_price'];
                $imgName = $row['produce_image_name'];
                $imgFolder = $row['produce_image_folder'];

                ?>

                <script>
                    var key = itemKey();
                </script>

                    <div class='col-lg-4 col-sm-6 col-md-4' >
                        <div class='thumbnail'>
                            <p style='visibility : ' id = 'itemId'><?php echo $id; ?></p>
                            <p style='visibility : hidden' id = 'itemStock'><?php echo $stock; ?></p>
                            <p class='text-center' id = "itemName"><?php echo $name; ?></p>
                            <img src='admin/<?php echo $imgFolder ."/".$imgName; ?>'>
                            <div class='caption'>
                                <p>kshs. <span id = 'itemPrice'><?php echo $price; ?> </span> /= per <span id = 'itemUnit'><?php echo $unit; ?></span>
                                <button class='btn pull-right' class = 'cartBtn' id = '' onclick = 'display(addToCart(key))'><span class='glyphicon glyphicon-shopping-cart'></span></button></p>
                            </div>
                        </div>
                    </div>


                <?php
            }
            ?>

        </div>

这是单击“添加到购物车”按钮时应执行的JS代码：

var cart = [];

        function addToCart(item){
            var id = $("#itemId").text();
            var name = $("#itemName").text();
            var stock = $("#itemStock").text();
            var unit = $("#itemUnit").text();
            var price = $("#itemPrice").text();


                var cartItem = {
                    cartItemId : id,
                    cartItemName : name,
                    cartItemStock : stock,
                    cartItemUnit : unit,
                    cartItemPrice : price,
                }

                cart.push(cartItem);
                console.log(cart);
                return cart;
            }

        function itemKey(){
            var key;
            key = Math.floor(Math.random() * 10000000001);
            return key;
        }


        function checkIfInCart(item){
            //check if item is in cart
            var inCart = false;
            if(cart.includes(item) == true){
                inCart = true;
            }
            else{
                incart = false;
            }

        return inCart;
        }


        function display(){
            for(i = 0; i < cart.length; i ++){
                $("#cartContents").html("<tr><td></td><td>" + cart[i].cartItemName + "</td><td></td><td>" + cart[i].cartItemPrice + "</td><td></td></tr>");
            }
        }

它工作正常，除了该数组仅接受一个项目，并且如果您单击按钮将另一个项目push（）到购物车数组，则它仅复制购物车中已有的第一个项目。输出的console.log如下所示：

 (1) […]

0: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

length: 1

<prototype>: Array []


0: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

1: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

length: 2

<prototype>: Array []

(3) […]

0: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

1: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

2: Object { cartItemId: "4", cartItemName: "Apples", cartItemStock: "200", … }

length: 3

我如何确保购物车接受第二个和第三个...项目，而不是重复第一个？

Answer 1

TL; DR：PHP中的foreach循环会将多个#itemId元素呈现到DOM中，并且您始终在查询第一个元素

您没有在item中使用addToCart(item)参数，也没有将其设置为代表特定项目的唯一值：

...
var key = itemKey(); // this always generates a unique value, it doesn't point to the current $row item rendered in the PHP context
...
onclick = 'display(addToCart(key))' // here you are just passing that random value to the add function
...

在函数本身中，您正在查询DOM中与ID匹配的第一项（总是第一项），而不是特定项的dom元素：

...
function addToCart(item){
            var id = $("#itemId").text(); // this will always choose the first #itemId element in DOM
            var name = $("#itemName").text();
            var stock = $("#itemStock").text();
            var unit = $("#itemUnit").text();
            var price = $("#itemPrice").text();
...

有多种解决方法，一种更简单的方法是在dom中添加另一个（每个产品）唯一标识符，以便您可以选择特定产品的名称（以及其他属性）：

<div class='thumbnail' id='product-<?php echo $id; ?>'> // added a per-product DOM element ID #product-X

然后您需要在点击处理程序中传递它：

...
onclick = 'display(addToCart("#product-<?php echo $id; ?>"))' // passing that id to the add function
...

现在您可以像这样更改查询：

...
function addToCart(item){
            var id = $(item + " #itemId").text(); // now the query will find the correct element
            var name = $(item + " #itemName").text();
            var stock = $(item + " #itemStock").text();
            var unit = $(item + " #itemUnit").text();
            var price = $(item + " #itemPrice").text();
...

还请注意，在一页上多次具有相同的元素ID并不是完全干净的，我建议改为使用类。

Answer 2

您可以使用下面的代码在数组中提供唯一元素，这样可以避免元素重复的问题

` //过滤唯一值 const array = [1，1，2，3，5，5，1];

const uniqueArray = [... new Set（array）];

console.log（uniqueArray）;`

实现购物车中的JS数组问题

2 个答案: