嘗試將產品添加到我的購物車時，我在控制台中收到一條“未定義”消息

Question

我正在努力使我的功能發揮作用，最終必須將商品添加到我的購物車中。 但是，我遵循的教程是利用他的 html 中的數據，他通過元素本身的數據類型傳遞了這些數據。 我正在從 json 文件中檢索數據。 我想知道如何使這個簡單的功能發揮作用，以便我可以繼續研究該功能。 此時，我在控制台中返回“未定義”。

html代碼：

           <div class="row touchViewSection">
                <!-- shopping sector -->
                <!-- touchView -->
                <!-- categories menu -->
                <div class="col-3 categoriesSection">
                    <div class="categories">
                        <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                        <a class="nav-link" id="all" href="#">All</a>
                        <a class="nav-link" id="black-thunder" href="#">Black-thunder</a>
                        <a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a>
                        <a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a>
                        <a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a>
                        <a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a>
                    </div>
                </div>

                <!-- categories menu -->
<!--                <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
                <div class="col-9 productItems" >
                    <br>
                    <div class="row" id="touchViewProducts">

                    </div>
                </div>
            </div>
            <!--/touchView -->
            <!--Keyboard View -->
            <div class="row keyboardViewSection">
                <div class="col-12 keyboardViewRow">
                    <table id="data-table" class="table table-bordered" style="width: 100%;">
                        <thead id="tableHead">
                        <tr>
                            <th> # </th>
                            <th> Product name </th>
                            <th> Free Stock </th>
                            <th> Price </th>
                            <th> Action </th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <!--/Keyboard View -->
            <div class="footer">
                <div class="container">
                    <p class="text-muted"> Developed by Vesta Group</p>
                </div>
            </div>
        </div>
        <!--/shopping sector-->
        <div class="col-4 cartSection">
            <!--cart-->
            <div class="row">
                <div class="col-5">Product</div>
                <div class="col-1">Pcs.</div>
                <div class="col-2">Price</div>
                <div class="col-3">Total</div>
            </div>
            <hr style="background-color: white;">

            <div class="row cartCheck">
                <div class="col-5">Number of products</div>
                <div class="col-1">1</div>
                <div class="col-2">Subtotal</div>
                <div class="col-3 total">&euro; 0,00</div>

                <div class="col-5"></div>
                <div class="col-1"></div>
                <div class="col-2">Total </div>
                <div class="col-3">&euro; 0,00</div>

                <div class="col-12 checkoutBtn"> Checkout </div>
                <div class="col-6 addDiscountBtn"> Add discount </div>
                <div class="col-6 cancelBtn"> Cancel </div>
            </div>
            <!--/cart-->
        </div>
    </div>
</div>

</div>
    

JS代碼：

   <script>
        $.getJSON("assets/products/sample_products.json", function(data) {
            var product_data = '';
            $.each(data.data, function (key, value) {
                // console.log(data);
                product_data += '<div class="col-3 productCard">';
                product_data += '<a href="#" class="productItem">';
                product_data += '<div class="card">';
                product_data += '<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width:100%; height: 8vh;">';
                product_data += '<div class="container">';
                product_data += '<p>' + value.name + '</p>';
                product_data += '</div>';
                product_data += '</div>';
                product_data += '</a>';
                product_data += '</div>';
            });
            $('#touchViewProducts').append(product_data);


            //function to add item to shopping cart
            $(".productItem").click(function(e){
                e.preventDefault();

                var productInfo = $(this.dataset);
                console.log(productInfo[0].name);

            })
        })
  
    </script>

Answer 1

好好看看什么數據集 vs .data - 區別？ dataset做，或者數據，然后看看你在.productItem中的內部HTML，里面沒有單個數據屬性，難怪dataset無法獲取任何並且未定義。 請告訴我在console.log(productInfo[0].name);想要什么結果console.log(productInfo[0].name); 里面有什么，我們會提取出來。

您只需執行以下操作即可獲取名稱：

$(this).text()

澄清一下，您的點擊功能是從 HTML 中提取數據，而不是 JSON 數據本身。 您將 JSON 數據放入動態變紅的 HTML 中，然后單擊即可獲取。

此外，如果只需要名稱結果，請記住，如果您在.productItem添加更多文本，您將使用單擊選擇器進行更深入的挖掘，調整它。 在當前的例子中工作。 例子：

 //$.getJSON("assets/products/sample_products.json", function(data) { var product_data = ''; var data= { "data" : [{"id":"1333","article_number":"4016","barcode":"heeftgeenbarcode4","name":"White Albino"}] }; $.each(data.data, function(key, value) { // console.log(data); product_data += '<div class="col-3 productCard">'; product_data += '<a href="#" class="productItem">'; product_data += '<div class="card">'; product_data += '<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width:100%; height: 8vh;">'; product_data += '<div class="container">'; product_data += '<p>' + value.name + '</p>'; product_data += '</div>'; product_data += '</div>'; product_data += '</a>'; product_data += '</div>'; }); $('#touchViewProducts').append(product_data); //function to add item to shopping cart $(".productItem").click(function(e) { e.preventDefault(); console.log($(this).text()); var productInfo = $(this.dataset); //console.log(productInfo[0].name); }) //})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row touchViewSection"> <!-- shopping sector --> <!-- touchView --> <!-- categories menu --> <div class="col-3 categoriesSection"> <div class="categories"> <p style="background-color: white; margin-bottom: 0px"> Categories </p> <a class="nav-link" id="all" href="#">All</a> <a class="nav-link" id="black-thunder" href="#">Black-thunder</a> <a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a> <a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a> <a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a> <a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a> </div> </div> <!-- categories menu --> <!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>--> <div class="col-9 productItems"> <br> <div class="row" id="touchViewProducts"> </div> </div> </div> <!--/touchView --> <!--Keyboard View --> <div class="row keyboardViewSection"> <div class="col-12 keyboardViewRow"> <table id="data-table" class="table table-bordered" style="width: 100%;"> <thead id="tableHead"> <tr> <th> # </th> <th> Product name </th> <th> Free Stock </th> <th> Price </th> <th> Action </th> </tr> </thead> </table> </div> </div> <!--/Keyboard View --> <div class="footer"> <div class="container"> <p class="text-muted"> Developed by Vesta Group</p> </div> </div> </div> <!--/shopping sector--> <div class="col-4 cartSection"> <!--cart--> <div class="row"> <div class="col-5">Product</div> <div class="col-1">Pcs.</div> <div class="col-2">Price</div> <div class="col-3">Total</div> </div> <hr style="background-color: white;"> <div class="row cartCheck"> <div class="col-5">Number of products</div> <div class="col-1">1</div> <div class="col-2">Subtotal</div> <div class="col-3 total">&euro; 0,00</div> <div class="col-5"></div> <div class="col-1"></div> <div class="col-2">Total </div> <div class="col-3">&euro; 0,00</div> <div class="col-12 checkoutBtn"> Checkout </div> <div class="col-6 addDiscountBtn"> Add discount </div> <div class="col-6 cancelBtn"> Cancel </div> </div> <!--/cart--> </div> </div> </div> </div>