Question

我正在尝试构建本地存储的购物车，但无法弄清楚为什么我设置的加/减按钮不起作用。

我已经包含了代码的图片，第一个是购物车，第二个是我的JavaScript，每单击一次按钮，JavaScript就会增加/减少1。

任何帮助将不胜感激

<script>


var value1 = localStorage.getItem('name1') || 0;

var value2 = localStorage.getItem('name2') || 0;

var value3 = localStorage.getItem('name3') || 0;

// get values from the input in shopping class file



$(‘.quantity’).on(‘click’, ‘.btn’, function(e) {
e.preventDefault();
var $this = $(this),
$input = $this.closest(‘div’).find(‘input’),
value = parseInt($input.val()),
btn = $this.data(‘btn’);

if (btn === ‘minus’) {
value = value > 1 ? value – 1 : 0;
} else {
value = value < 100 ? value + 1 : 100;
 }

$input.val(value);
 });

 $(‘.delete-btn’).on(‘click’, function(e) {
 $(this).parent().parent().hide();
});

</script>


<div class="shoppingCart">
  <!-- Title -->
  <h1>
   <b> Shopping Cart</b>
  </h1>

  <!-- Product #1 -->
   <div class="item">
    <div class="buttons">
      <span class="delete-btn"></span>
    </div>

    <div class="image">
      <img src="Halo 3.png" style = "width:75px"alt="" />
    </div>

    <div class="description">
      <span>Halo 3</span>


    </div>

    <div class="quantity">
      <button class="btn" type="button"  name="button">
        <img src="plus.png" style = "width:10px" alt="" />
      </button>
      <input type="text" name="name1" value="1">
      <button class="btn" type="button" name="button">
          <img src="minus.png" style = "width:10px" alt="" />
      </button>
    </div>

    <div class="total-price">$69.99</div>
  </div>
</div>

Answer 1

我发现了一些已更正的错误，并放在了这个小提琴中，供您使用。一个语法错误是使用了这些字符‘’–，它们被替换为'-。

还在您的click（）函数$this.data('btn')中返回了undefined。在jsfiddle中，我对此进行了重新设计，以便获得对按钮的引用，并且还将引用输入的变量移到click（）函数之外，因为您实际上只需要查找一次，而不是每次都单击即可。

https://jsfiddle.net/4mhLz6dx/

<div class="shoppingCart">
  <!-- Title -->
  <h1>
   <b> Shopping Cart</b>
  </h1>

  <!-- Product #1 -->
   <div class="item">
    <div class="buttons">
      <span class="delete-btn"></span>
    </div>

    <div class="image">
      <img src="Halo 3.png" style = "width:75px"alt="" />
    </div>

    <div class="description">
      <span>Halo 3</span>


    </div>

    <div class="quantity">
      <button class="btn" type="button"  name="plus">
        <img src="plus.png" style = "width:10px" alt="" />
      </button>
      <input type="text" name="name1" value="1">
      <button class="btn" type="button" name="minus">
          <img src="minus.png" style = "width:10px" alt="" />
      </button>
    </div>

    <div class="total-price">$69.99</div>
  </div>
</div>


<script type="text/javascript">

var value1 = localStorage.getItem('name1') || 0;

var value2 = localStorage.getItem('name2') || 0;

var value3 = localStorage.getItem('name3') || 0;

// get values from the input in shopping class file

var inputTotal = $('.quantity input');

$('.quantity').on('click', '.btn', function(e) {
  e.preventDefault();
  var btn = $(this),
  //$input = $this.closest('div').find('input'), // store the reference to this since it doesn't change so you don't look it up each call
  value = parseInt(inputTotal.val());


  if (btn.attr('name') === 'minus') {
    value = value > 1 ? value - 1 : 0;
  } 
  else {
    value = value < 100 ? value + 1 : 100;
  }

    inputTotal.val(value);
});

$('.delete-btn').on('click', function(e) {
    $(this).parent().parent().hide();
});


</script>

创建本地存储的“购物车”

1 个答案: