时间戳

首页 > 解决方案 > 如何使用 onclick 侦听器从元素中选择数据？

javascript - 如何使用 onclick 侦听器从元素中选择数据？

问题描述

我目前正在开发一个 Web 应用程序，该应用程序以后必须充当某种网上商店。我现在正在研究 addToCart 函数，该函数必须从单击的元素中选择某些数据（产品的名称和价格，并将 1 添加到 pcs 并将所有内容保存到会话中），并将这两个值粘贴到我制作的模板并将其放在购物车中。我现在正试图打印出我刚刚提到的 2 个值，但我现在卡住了。

这是我为加载所有产品而制作的当前 javascript 代码，以及我尝试显示单击项目的一些值的尝试：

 $(function(){
        $.getJSON("assets/products/sample_products.json", function(response) {
            $.each(response.data, function (i, el) {
                let card = $($('#productCard-template').html());
                card.find('#cardName').html( el.name);
                card.find('#cardPrice').html( '€' + el.price );
                card.find('.productItem').attr('data-price', el.price)
                    .attr('data-article-number', el.article_number)
                    .attr('data-id', el.id)
                    .attr('data-name', el.name)
                    .attr('data-stock', el.stock)
                    .attr('data-categories', el.categories);
                $('#touchViewProducts').append(card);
            });
        });
    });
    
    //onclick function adds data of product to the designated template
    function addToCart(){
        var value = document.getElementById("productCard").value;
        var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
        var total = 0;
        console.log(this.data-name)
    
    }

这是模板的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="knalvuurwerk" href="#">Knalvuurwerk</a>
                            <a class="nav-link" id="rotjes" href="#">Rotjes</a>
                            <a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</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 id="output" class="row"></div>
                <div class="row shopcardProducts" id="shopcartProducts">
                </div>

                <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>
                <div class="row cartCheck">
                    <div class="col-12 checkoutBtn"> Checkout </div>
                    <div class="col-6 addDiscountBtn"> Add discount </div>
                    <div class="col-6 cancelBtn"> Cancel </div>
                </div>

                <!--buttons-->
                <!--/cart-->
            </div>
        </div>
    </div>

    <script type="text/template" id="productCard-template">
        <div class="col-3 productCard" id="productCard" onclick="addToCart()">
            <a href="#" class="productItem">
                <div class="card">
                    <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
                    <div class="container">
                        <div class="row" style="height: 6vh; max-width: 20ch;">
                            <p id="cardName"> </p>
                        </div>

                        <div class="row" style="height: 50%">
                          <b><p id="cardPrice"></p></b>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </script>

    <script type="text/template" id="shopcartRow-template">
        <div class="row">
            <div class="col-5" id="valueName"> </div>
            <div class="col-1" id="valueQty"> </div>
            <div class="col-2" id="valuePrice"> </div>
            <div class="col-3" id="valueTotal"> </div>
        </div>
    </script>

这是网络应用程序的外观图像，我希望这可以使其更加清晰。 在此处输入图像描述

标签： javascripthtmljquery

解决方案

因为addToCart()是一个回调，你可以使用this它来访问它的上下文（调用者元素）：

function addToCart(){
    var value = $(this).val(); // what val you want to refer? there are no input in the template
    var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
    var total = 0;
    console.log(this.data-name)
}

推荐阅读