使用 jQuery 添加到购物车答案

【问题标题】：Add to cart using jQuery使用 jQuery 添加到购物车
【发布时间】：2020-09-03 18:01:29
【问题描述】：

我正在尝试使用 jQuery 添加到购物车进行建模。但它有一个小问题，我该如何解决。如果我单击mybtn 按钮模型显示并正常工作，但数量它不能正常工作。我该如何解决？提前致谢。

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<body>
  <div class="shoe single-item hvr-outline-out">
    <form method="post" action="#" class="cart">
      <input type="hidden" name="id" id="id" id="<%= doc._id%>">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="add" value="1">
      <input type="hidden" id="pname_<%= doc._id%>" name="shoe_item" value="<%=doc.product_name%>">
      <input type="hidden" id="amount_<%= doc._id%>" name="amount" value="<%=doc.price%>">
    </form>
    <button type="submit" id="myBtn1_<%= doc._id%>" data-id="<%= doc._id%>" value="<%= doc._id%>" class="shoe-cart pshoe-cart myBtn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button>
  </div>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <br/>
        <center>
          <table class="row"> </table>
        </center>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript">
  $(document).ready(function() {
    $(".myBtn").click(function() {
      $('#myModal').modal('show');
    });
  });
</script>

<script type="text/javascript">
  var count = 0;
  $(document).ready(function() {
    $(".myBtn").click(function() {
      var id = $(this).data('id');
      var p_name = $('.cart').find('#pname_' + id).val();
      var count1 = count++;
      var amount = $('.cart').find('#amount_' + id).val();
      var html = "<tr id='tr_'" + id + "><td>" + p_name + "</td><td>" + amount + "</td><td><input type='text' name='count' id='count_" + id + "' size='3' value='" + count + "'></td>/tr>";
      var quan = $('.row').find('#count_' + id).val();
      if (!quan) {
        $('.row').append(html);
      } else {
        $('#count_' + id).append(count);
      }
    });
  });
</script>

【问题讨论】：

你能显示你的模态代码吗？
这是我的型号代码
你从哪里得到quan？你的<form>没有数量输入？我没有得到这个 $('.row').find('#count_'+id).val() 。另外，你的问题中的邮政编码不在 cmets 中
在上面的标记和链接库中添加了模式...

标签： javascript html jquery css mode

【解决方案1】：

模态显示后添加点击事件

$('#myModal').on('shown.bs.modal', function () {
  $(".myBtn").click(function() {
     //your code here
  });
})

【讨论】：

谢谢，但是如何在我的代码中正确添加到购物车
使用本地存储存储用户选择的数据，然后在结帐页面处理数据到服务器。要显示数据，请从本地存储中获取数据...处理后不要忘记清除本地存储检查此答案stackoverflow.com/questions/11123622/…