Как увеличить / уменьшить значение динамически генерируемых текстовых полей

0

У меня есть сайт электронной коммерции в 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>

Для пригодности я также прикрепляю скриншот для того, что я ищу.

Изображение 174551

Я потратил много времени, чтобы добиться того же, но не смог.

  • 0
    У меня нет ответа на вашу проблему, но я хочу рассказать вам о вашем подходе. Пожалуйста, примите во внимание, что некоторые продукты могут быть проданы с приращением. Например, у вас может быть продукт, который можно купить в количестве 5,10,15,20... В этом случае кнопка +1 должна быть +5 .
Теги:
magento

4 ответа

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/

Поделиться
  • 0
    он не работает в соответствии с необходимостью. нет изменений в его поведении .. он работает как раньше.
0

Просто замените

$ (this).data("min") с $ (this).attr("data-min")

и $

(это).data("max") с $ (this).attr("data-max")

и проверить.

Также упоминается ли файл jquery как в локальном, так и в живом веб-сайте?

Также, как "denat", когда использование div внутри таблицы недействительно

Поделиться
0

если элементы не были в 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 и alse в ответе рядом: delete "div" - это недействительно, чтобы использовать div между строками таблицы

Поделиться
  • 0
    всякий раз, когда я перезагружаю эту страницу, ее кол-во автоматически устанавливается равным 5, т.е. максимальное значение
  • 0
    Я думаю, вы пропустили точку с запятой после закрытия document.body. это ?
Показать ещё 6 комментариев
0

Ваш код работает отлично - это просто, что ваш 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>
Поделиться
  • 0
    это может быть, но как ты можешь это сказать? .. в исходном коде я проверил правильность открытия и закрытия тега в структуре таблицы
  • 0
    На самом деле у вас есть <div> между <tr> s. Это недопустимо в таблицах HTML.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню