Переключатель количества без редактирования HTML

#javascript #jquery

Всем привет. Появилась такая простенькая задачка, но, почему-то не выходит её толком
закончить. Необходимо переключатель количества материалов внедрить на страницу, где
нет возможности редактировать  html код. Сам выбор значений выглядит так:



(function ($) {
  
  $('.spinner').each(function() {  
    
  var spinner = $(this),
      input = spinner.find('input[type="text"]'),
      btnUp = spinner.find('.up'),
      btnDown = spinner.find('.down'),
      // options
      step = 1,
  		min = 1,
  		max = 100;
      
  input.val(min);
  
  btnUp.click(function(){
    input.val() >= max ? $(this).prop("disabled",true) : input.val((input.val()*1)
+ step);
    
 });
  
  btnDown.click(function(){
    input.val() <= min ? $(this).prop("disabled",true) : input.val((input.val()*1)
- step);
   });
    
  });
})(jQuery);
.spinner {
  width: 100px;
  height: 50px;
  display: table;
  margin-bottom: 30px;
}
.spinner input[type="text"] {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  width: 50px;
  text-align: center;
  height: 50px;
  float: left;
  border: 1px solid #ccc;
  border-right: none;
}
.spinner .nav {
  float: left;
}
.spinner .nav .up,
.spinner .nav .down {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background-color: #ddd;
  color: #333;
  font-size: 20px;
}
.spinner .nav .up:hover,
.spinner .nav .down:hover {
  box-shadow: inset 0px 0px 17px 0px rgba(255, 255, 255, 0.5);
}
.spinner .nav .up {
  border-top-right-radius: 3px;
}
.content .container .spinner .nav .down {
  border-bottom-right-radius: 3px;
}




+
-











Там же есть и пример кода с инпутами, к которым необходимо добавить кнопки + и -
. Пробовал через .append создать структуру перед выполнением функции внутри блока с
инпутами, но переключатель перестает работать. Если нужно, добавлю свой код, но, учитывая,
что он не работает, толку от этого не много. Буду благодарен за пример или хотя бы
направление мысли.
    

Ответы

Ответ 1

Вот готовое решение для ваших нужд:



$(document).ready(function(){    
    inputNumberPolyfill();  
});

var increaseIv = null;
var increaseTm = null;

function inputNumberPolyfill()
{
  //if(Modernizr.inputtypes.number) return;  
  $('.spinner input[type="text"]').each(function(){
    var $this = $(this);    
    var step = parseInt($this.attr('step'), 10);
    if(isNaN(step)) step = 1;
    
    $this.parent().append(
      '
'+
      ''+
      '+'+
      ''+
      ''+
      '-'+
      ''+
      '
'+
      '

'); }); $('.nav a').mousedown(function(ev){ ev.preventDefault(); clearInterval(increaseIv); clearTimeout(increaseTm); var input = $(this); increaseInput(input); increaseTm = setTimeout(function(){ increaseIv = setInterval(function(){ increaseInput(input); }, 60); }, 300); return false; }).mouseup(function(ev){ ev.preventDefault(); clearTimeout(increaseTm); clearInterval(increaseIv); return false; }).mouseout(function(ev){ ev.preventDefault(); clearTimeout(increaseTm); clearInterval(increaseIv); return false; }); $('.spinner input[type="text"]').change(function(ev){ var $this = $(this); var minValue = parseInt($this.attr('min')); var maxValue = parseInt($this.attr('max')); if(isNaN(minValue)) minValue = 0; if(isNaN(maxValue)) maxValue = 9999999; var inputValue = parseInt($this.val()); if(isNaN(inputValue)) inputValue = 0; var finalValue = Math.min(maxValue, Math.max(minValue, inputValue)); if(finalValue != inputValue) $this.val(finalValue); }); } function increaseInput(input) { var $this = input; var spinner = $this.parent(); var spinnerValue = parseInt($this.attr('data-value'), 10); var target = spinner.parent().find('input[type="text"]'); var targetValue = parseInt(target.val(), 10); if(isNaN(targetValue)) targetValue = 0; var minVal = parseInt(target.attr('min')); var maxVal = parseInt(target.attr('max')); if(isNaN(minVal)) minVal = 0; if(isNaN(maxVal)) maxVal = 9999999; var finalValue = targetValue + spinnerValue; finalValue = Math.min(maxVal, Math.max(minVal, finalValue)); target.val(finalValue); } .spinner { width: 100px; height: 50px; display: table; margin-bottom: 30px; } .spinner input[type="text"] { border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 50px; text-align: center; height: 50px; float: left; border: 1px solid #ccc; border-right: none; } .spinner .nav { float: left; } .spinner .nav .up, .spinner .nav .down { cursor: pointer; display: block; text-decoration: none; border: 1px solid #ccc; width: 25px; height: 25px; text-align: center; line-height: 25px; background-color: #ddd; color: #333; font-size: 20px; } .spinner .nav .up:hover, .spinner .nav .down:hover { box-shadow: inset 0px 0px 17px 0px rgba(255, 255, 255, 0.5); } .spinner .nav .up { border-top-right-radius: 3px; } .content .container .spinner .nav .down { border-bottom-right-radius: 3px; }

Ответ 2

(function ($) { var step = 1, min = 1, max = 10; $('.spinner').each(function(i, el) { var $spinner = $(el), $nav = $spinner.find('.nav'); if(!$nav.length) { $spinner.append('

+

-

'); } }); $('input').val(min); $(document).on('click', '.up', function (e) { var $this = $(e.target), $spinner = $this.closest('.spinner'), $input = $spinner.find('input'), val = $input.val(); if(val < max) { $input.val((val * 1) + step); } }); $(document).on('click', '.down',function (e) { var $this = $(e.target), $spinner = $this.closest('.spinner'), $input = $spinner.find('input'), val = $input.val(); if(val > min) { $input.val((val * 1) - step); } }); })(jQuery); .spinner { width: 100px; height: 50px; display: table; margin-bottom: 30px; } .spinner input[type="text"] { border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 50px; text-align: center; height: 50px; float: left; border: 1px solid #ccc; border-right: none; } .spinner .nav { float: left; } .spinner .nav .up, .spinner .nav .down { cursor: pointer; border: 1px solid #ccc; width: 25px; height: 25px; text-align: center; line-height: 25px; background-color: #ddd; color: #333; font-size: 20px; } .spinner .nav .up:hover, .spinner .nav .down:hover { box-shadow: inset 0px 0px 17px 0px rgba(255, 255, 255, 0.5); } .spinner .nav .up { border-top-right-radius: 3px; } .content .container .spinner .nav .down { border-bottom-right-radius: 3px; }

+

-