如何使用HTML CSS设计响应式电子商务产品卡

Question

请问有谁能帮助我设计产品卡，当我们单击添加到购物车按钮时，添加按钮响应时，应将其更改为-1 +，然后单击+号，数量增加而-号上数量减少，该卡应使用HTML，CSS和JS开发

作为参考，您可以访问www.swiggy.com

Answer 1

你期望这样吗？

  $('.minus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value > 1) { value = value - 1; } else { value = 0; } $input.val(value); }); $('.plus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) { value = value + 1; } else { value =100; } $input.val(value); }); $('.like-btn').on('click', function() { $(this).toggleClass('is-active'); }); 

  @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500); .shopping-cart { border-radius: 6px; display: flex; flex-direction: column; } .title { padding: 20px 30px; color: #5E6977; font-size: 18px; font-weight: 400; } .item { padding: 20px 30px; height: 120px; display: flex; } .is-active { animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; } .description { padding-top: 10px; margin-right: 60px; width: 115px; } .description span { display: block; font-size: 14px; color: #43484D; font-weight: 400; } .quantity { padding-top: 20px; margin-right: 60px; } .quantity input { -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300; } button[class*=btn] { width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer; } .minus-btn img { margin-bottom: 3px; } .plus-btn img { margin-top: 2px; } button:focus, input:focus { outline:0; } 

  <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script> <div class="shopping-cart"> <div class="title"> ADD TO CART </div> </div> <div class="item"> <div class="description"> <span>item description</span> </div> <div class="quantity"> <button class="minus-btn" type="button" name="button"> -</button> <input type="text" name="name" value="1"> <button class="plus-btn" type="button" name="button"> +</button> </div> </div>