Javascript .innerHTML输出触发器中的干扰

我试图输出一个计算价格的基础上，为每个产品选择的数量分别。我尝试复制代码并重命名所有变量，但输出会被各种增加/减少按钮触发

这是迄今为止的代码：

$（.incr-btn_mobile”）。在（“单击”上，功能（e）{
var$按钮=$（此按钮）；
var oldValue=$button.parent（）.find（'.quantity'）.val（）；
$button.parent（）.find（'.incr-btn_mobile[data action=“decrease”]）.removeClass（'inactive'）；
如果（$button.data（'action'）==“增加”）{
var newVal=parseFloat（oldValue）+1；
}否则{
//不允许在1以下递减
如果（旧值>1）{
var newVal=parseFloat（oldValue）-1；
}否则{
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、 预防默认值（）；
});
.count-input\u mobile{
位置：相对位置；
最大宽度：1000%；
最大宽度：400px；
边际：0px0；
}
.计数输入\移动输入{
宽度：100%；
身高：36.92307692px；
边框：1px实心#000边框半径：2px；
背景：无；
文本对齐：居中；
}
.count-input_移动输入：焦点{
大纲：无；
}
.count-input\u mobile.incr-btn\u mobile{
显示：块；
位置：绝对位置；
宽度：30px；
高度：30px；
字号：26px；
字体大小：300；
文本对齐：居中；
线高：30px；
最高：50%；
右：0；
利润上限：-15px；
文字装饰：无；
}
.count-input_mobile.incr-btn_mobile:第一个孩子{
右：自动；
左：0；
最高：46%；
}
.count-input_mobile.count-input-sm{
最大宽度：125px；
}
.count-input_mobile.count-input-sm input{
高度：36px；
}
.count-input_mobile.count-input-lg{
最大宽度：200px；
}
.count-input_mobile.count-input-lg input{
高度：70像素；
边界半径：3px；
}
.button_手机{
边框：1px实心#000；
边界半径：2px；
背景：无；
填充：10px 32px；
宽度：100%；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
光标：指针；
边缘顶部：10px；
}

=$7.99
= $7.99
这是因为两个结果框都有相同的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>

您的代码基本正常，但不能有多个相同的
id
s<代码>id

应该是唯一的

html标记也无效--

如果没有表结构，看起来很奇怪

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

$（.incr-btn_mobile”）。在（“单击”上，功能（e）{
var$按钮=$（此按钮）；
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'）==“增加”？1:-1）；
//不允许在1以下递减
如果（！newVal）newVal=+！！$button.addClass（'inactive'）；
$parent.find（'.quantity'）.val（newVal）
.end（）.next（'.totalPrice'）.html（“=$”+newVal*7.99）；
e、 预防默认值（）；
});
.count-input\u mobile{
位置：相对位置；
最大宽度：1000%；
最大宽度：400px；
边际：0px0；
}
.计数输入\移动输入{
宽度：100%；
身高：36.92307692px；
边框：1px实心#000边框半径：2px；
背景：无；
文本对齐：居中；
}
.count-input_移动输入：焦点{
大纲：无；
}
.count-input\u mobile.incr-btn\u mobile{
显示：块；
位置：绝对位置；
宽度：30px；
高度：30px；
字号：26px；
字体大小：300；
文本对齐：居中；
线高：30px；
最高：50%；
右：0；
利润上限：-15px；
文字装饰：无；
}
.count-input_mobile.incr-btn_mobile:第一个孩子{
右：自动；
左：0；
最高：46%；
}
.count-input_mobile.count-input-sm{
最大宽度：125px；
}
.count-input_mobile.count-input-sm input{
高度：36px；
}
.count-input_mobile.count-input-lg{
最大宽度：200px；
}
.count-input_mobile.count-input-lg input{
高度：70像素；
边界半径：3px；
}
.button_手机{
边框：1px实心#000；
边界半径：2px；
背景：无；
填充：10px 32px；
宽度：100%；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
光标：指针；
边缘顶部：10px；
}

= $7.99
=$7.99
此处的HTML不正确。最后一个
没有开始标记。HTML中的
incr-btn\u mobile\u 2
在哪里？我编辑了代码并删除了两个标记。incr-btn_mobile_2不在html中，因为我希望避免基于此更改添加这么多css和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();
    });