javascript - 将两个变量与生成的数字进行比较

目前，我学习PHP的曲线，并且第一次尝试向我的PHP脚本提出AJAX请求。为了自己的学习目的，我在自己的书面商店中购买了购物车，它为每个位置生成具有相同“ data-id”属性的按钮和输入字段。当然，输入字段具有当前产品数量的“值”属性。

码：

jQuery：

$(document).ready(function() {
    $(".btn").click(function () {
        var id = $(this).attr("data-id");
        var idInput = $(".field").attr("data-id");
        var value = $(".field").attr("value");
        if (id === idInput) {
            $.post("/cart/addAjax/" + id, {}, function (data) {
                $("#cart-count").html(data);
            });
            $.post("/cart/addAjax/" + value, {});
            return false;
        } else {}
    });
});

PHP生成的HTML的输入示例：

            <input class="field" data-id="3" type="number" value="23">
            <button class="btn" data-id="3">Quantity</button>

            <input class="field" data-id="14" type="number" value="3">
            <button class="btn" data-id="14">Quantity</button>

            <input class="field" data-id="17" type="number" value="2">
            <button class="btn" data-id="17">Quantity</button>

            <input class="field" data-id="18" type="number" value="8">
            <button class="btn" data-id="18">Quantity</button>

            <input class="field" data-id="19" type="number" value="10">
            <button class="btn" data-id="19">Quantity</button>

我想让Jquery脚本比较输入/按钮的“ data-id”属性并将选定的“ data-id”属性请求的“ value”发送到PHP端，但是不知道如何告诉脚本从选定的“ data”中获取“ value” -id”，猜测其原因是其POST成功仅针对购物车中的第一个生成的产品成功，而其余产品脚本不起作用。有人可以启发我如何实现这一目标吗？感谢您的建议。

最佳答案

您需要更好地构造html。

我对html进行了一些更改，并将每个btn和field放在div下。

这将使通过btn click查找所选输入变得容易。

阅读评论以了解。

$(document).ready(function() {
    $(".btn").click(function () {
        var id = $(this).attr("data-id");
        // now go to the selected btn Parent, and then find the .field
        // there you are sure its the right field becouse both the button
        // and the field is containe under one div{Parent}
        var idInput = $(this).parent().find(".field")
       console.clear();
       console.log("you Selected id " +id + " and its value is " + idInput.val())
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

            <input class="field" data-id="3" type="number" value="23">
            <button class="btn" data-id="3">Quantity</button>
  </div>
  <div>
            <input class="field" data-id="14" type="number" value="3">
            <button class="btn" data-id="14">Quantity</button>
   </div>
   <div>
            <input class="field" data-id="17" type="number" value="2">
            <button class="btn" data-id="17">Quantity</button>
    </div>
    <div>
            <input class="field" data-id="18" type="number" value="8">
            <button class="btn" data-id="18">Quantity</button>
   <div>
            <input class="field" data-id="19" type="number" value="10">
            <button class="btn" data-id="19">Quantity</button>
   </div>