我该如何处理这个问题“TypeError：无法读取未定义的属性'toString'”

Question

html 文件：-

<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn"><i class="fas fa-minus-square fa-lg" id="{{cart.product.id}}" ></i></a>
<span id="quantity">{{cart.quantity}}</span>
<a class="plus-cart btn"><i class="fas fa-plus-square fa-lg pid={{cart.product.id}} ></i></a>
</div>

jquery 文件：-

$('.plus-cart').click(function () {
    var id = $(this).attr("pid").toString();
    var eml = this.parentNode.children[2];
    console.log(id);
    $.ajax(
        {
            type: "GET",
            url: "/pluscart",
            data: {
                prod_id: id
            },
            success: function (data) {
                console.log(data);
                eml.innerText = data.quantity;
                document.getElementById("amount").innerText = data.amount.toFixed(2);
                document.getElementById("totalamount").innerText = data.totalamount.toFixed(2);
            }
        })
});

error image

请帮我解决这个问题，这是我在项目中发生的最后一个错误

Answer 1

pid 在子元素 (i) 中，不在 a 标记中

$(this).children("i").attr("pid").toString()

或者将pid移动到a标签

<a class="plus-cart btn" pid={{cart.product.id}}><i class="fas fa-plus-square fa-lg></i></a>

Answer 2

出现此错误是因为 pid 不在 a 标签中。

<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn"><i class="fas fa-minus-square fa-lg" id="{{cart.product.id}}"></i></a>
<span id="quantity">{{cart.quantity}}</span>
<a class="plus-cart btn" pid={{cart.product.id}}><i class="fas fa-plus-square fa-lg></i></a>
</div>

请像这样修复它。

其他方式：

我认为如果你使用 attr 发送一些数据，编码风格是不够的

你可以像这样使用数据属性来做到这一点。

in html

<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn"><i class="fas fa-minus-square fa-lg" id="{{cart.product.id}}"></i></a>
<span id="quantity">{{cart.quantity}}</span>
<a class="plus-cart btn" data-pid={{cart.product.id}}><i class="fas fa-plus-square fa-lg></i></a>
</div>

in jquery

$('.plus-cart').click(function () {
    var id = $(this).data("pid").toString();
    var eml = this.parentNode.children[2];
    console.log(id);
    $.ajax(
        {
            type: "GET",
            url: "/pluscart",
            data: {
                prod_id: id
            },
            success: function (data) {
                console.log(data);
                eml.innerText = data.quantity;
                document.getElementById("amount").innerText = data.amount.toFixed(2);
                document.getElementById("totalamount").innerText = data.totalamount.toFixed(2);
            }
        })
});

另外我认为你不需要调用.toString() 方法。