Question

我正在尝试根据每种产品的选择数量单独输出计算价格。我尝试复制代码并重命名所有变量，但输出由各种增加/减少按钮触发。

这是到目前为止的代码：

＆＃13;

$(".incr-btn_mobile").on("click", function(e) {
  var $button = $(this);
  var oldValue = $button.parent().find('.quantity').val();
  $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
  if ($button.data('action') == "increase") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below 1
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 1;
      $button.addClass('inactive');
    }
  }
  $button.parent().find('.quantity').val(newVal);

  var cakePrice = newVal;
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "= $" + (cakePrice) * 7.99;
  e.preventDefault();


});

＆＃13;

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin: 0px 0;
}

.count-input_mobile input {
  width: 100%;
  height: 36.92307692px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10px 32px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>

<td>
  <div id="totalPrice">=$7.99</div>
</td>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_5_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
</td>
<td>
  <div id="totalPrice">= $7.99</div>
</td>

＆＃13;

我的想法是创建一个新的函数，这次引用.incr-btn_mobile_2，但我希望有一个更有效的解决方案，以避免添加所有额外需要的css位和所有。

Answer 1

你的代码几乎没问题，但你不能有几个相同的id。 id应该是唯一的。

html标记也无效 - <td>在没有表格结构的情况下看起来很奇怪。

请参阅下面的代码段以更新您的代码。

$(".incr-btn_mobile").on("click", function(e) {
  var $button = $(this);
  var $parent = $button.parent();
  var oldValue = $parent.find('.quantity').val();

  $parent.find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');

  var newVal = +oldValue + ($button.data('action') === "increase" ? 1 : -1);

  // Don't allow decrementing below 1
  if (!newVal) newVal = +!!$button.addClass('inactive');

  $parent.find('.quantity').val(newVal)
  .end().next('.totalPrice').html("= $" + newVal * 7.99);
  e.preventDefault();

});

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin: 0px 0;
}

.count-input_mobile input {
  width: 100%;
  height: 36.92307692px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10px 32px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
<div class="totalPrice">= $7.99</div>


<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_5_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
<div class="totalPrice">= $7.99</div>

Answer 2

这是因为你的结果框都有相同的id： totalPrice ，你需要设置不同的id并将按钮中的id设置为数据目标。

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="totalPrice" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" data-target="totalPrice" href="#">+</a>
</div>

<td>
  <div id="totalPrice">=$7.99</div>
</td>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="totalPrice2" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_5_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" data-target="totalPrice2" href="#">+</a>
</div>
</td>
<td>
  <div id="totalPrice2">= $7.99</div>
</td>

和js：

$(".incr-btn_mobile").on("click", function(e) {
      var $button = $(this);
      var oldValue = $button.parent().find('.quantity').val();
      $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
      if ($button.data('action') == "increase") {
        var newVal = parseFloat(oldValue) + 1;
      } else {
        // Don't allow decrementing below 1
        if (oldValue > 1) {
          var newVal = parseFloat(oldValue) - 1;
        } else {
          newVal = 1;
          $button.addClass('inactive');
        }
      }
      $button.parent().find('.quantity').val(newVal);

      var cakePrice = newVal;
      var divobj = document.getElementById($button.attr('data-target'));
      divobj.style.display = 'block';
      divobj.innerHTML = "= $" + (cakePrice) * 7.99;
      e.preventDefault();
    });

干扰.innerHTML输出触发器

2 个答案: