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>

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

enter image description here

我花了很多时间来实现同样的目标，但我做不到。

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中，则对于此脚本它们是“看不见的”。尝试用“live”样式设置监听器 - 抛出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>

P.S。并在附近回答：删除“div” - 它无效，在表格的行之间使用div

Answer 4

只需替换

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

和$

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

并检查。

同样是在localhost和live网站中对jquery文件的引用是一样的吗？

也喜欢“denat”告诉使用表格内的div无效

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

4 个答案: