如何增加/减少动态生成的文本框的值

Question

我在Magento中有一个电子商务网站，为此，我要在购物车页面上添加+-按钮以递增和递减动态生成的数量文本框的值。 我有这么多代码，可以在localhost上正常工作，但在实时网站上无法正常工作

     <tr>
     <td>
       <input type="button" class="down" value="Down" data-min="0"/>
       <input type="text" class="incdec" value="0"/>
        <input type="button" class="up" value="Up" data-max="5"/>
    </td>
</tr>


     <tr>
     <td>
     <input type="button" class="down" value="Down" data-min="0"/>
      <input type="text" class="incdec" value="0"/>
      <input type="button" class="up" value="Up" data-max="5"/>
    <td>
   </tr>

这是脚本

          <script>
             $(document).ready(function() {
         $(".up").on('click',function(){
         var $incdec = $(this).parent().find(".incdec");
         if ($incdec.val() < $(this).data("max")) {
          $incdec.val(parseInt($incdec.val())+1);
         }
     });

   $(".down").on('click',function(){
      var $incdec = $(this).parent().find(".incdec");
      if ($incdec.val() > $(this).data("min")) {
        $incdec.val(parseInt($incdec.val())-1);
      }
     });
    });
          </script>

为了适应性，我还附上了我要寻找的屏幕截图。

我花了很多时间来实现相同目标，但我没有。

Answer 1

你能这样尝试吗

$(document).ready(function() {
         $(".up").on('click',function(){
         var $incdec = $(this).prev();
         if ($incdec.val() < $(this).data("max")) {
          $incdec.val(parseInt($incdec.val())+1);
         }
     });

   $(".down").on('click',function(){
      var $incdec = $(this).next();
      if ($incdec.val() > $(this).data("min")) {
        $incdec.val(parseInt($incdec.val())-1);
      }
     });
    });

演示： http ： //jsfiddle.net/mail2asik/M8JTP/

Answer 2

您的代码可以正常工作-只是您的HTML无效。

<table> 
    <tr>
        <td>
            <input type="button" class="down" value="Down" data-min="0"/>
            <input type="text" class="incdec" value="0"/>
            <input type="button" class="up" value="Up" data-max="5"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" class="down" value="Down" data-min="0"/>
            <input type="text" class="incdec" value="0"/>
            <input type="button" class="up" value="Up" data-max="5"/>
        <td>
    </tr>
</table>

Answer 3

如果在脚本启​​动之前DOM中没有元素，则此脚本“看不见”。 尝试将监听器设置为“实时”样式-抛出DOM中的元素，例如：

<script>
$(document).ready(function() {

  $(document.body).on("click", ".up", function(){
    var $incdec = $(this).parent().find(".incdec");
    if ($incdec.val() < $(this).data("max")) {
      $incdec.val(parseInt($incdec.val())+1);
    }
  });

  $(document.body).on("click", ".down", function(){
    var $incdec = $(this).parent().find(".incdec");
    if ($incdec.val() > $(this).data("min")) {
      $incdec.val(parseInt($incdec.val())-1);
    }
  });


});
</script>

PS和其他答案在附近：删除“ div”-无效，在表的行之间使用div

Answer 4

只需更换

$（this）.data（“ min”）与$（this）.attr（“ data-min”）

和$

（this）.data（“ max”）与$（this）.attr（“ data-max”）

并检查。

在本地主机和实时网站中对jquery文件的引用是否相同？

还像“ denat”告诉表内使用div无效