Number Switch without HTML Editing

Question

Hello. There was such a simple little problem, but for some reason it does not go out to finish it properly. It is necessary to embed the number of materials on a page where you can not edit the html code. The choice of values itself looks like this:

(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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spinner"> <input type="text"> <div class="nav"> <div class="up">+</div> <div class="down">-</div> </div> </div> <div class="spinner"><input name="cnt_10" maxlength="5" size="5" value="1" type="text"></div> <div class="spinner"><input name="cnt_11" maxlength="5" size="5" value="1" type="text"></div>

There is also an example of a code with inputs, to which you need to add the + and - buttons. I tried using .append to create a structure before performing the function inside the block with inputs, but the switch stops working. If necessary, I will add my code, but, given that it does not work, there is not much sense from this. I would be grateful for an example or at least a line of thought.

Alexey Giryayev Alexey Giryayev 3,759 7 silver marks 34 bronze marks · Accepted Answer · 2017-04-03T10:04:47

Here is a turnkey solution for your needs:

 $(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( '<div class="nav">'+ '<a class="up" data-value="'+step+'" href="#">'+ '<span class="label">+</span>'+ '</a>'+ '<a class="down" data-value="-'+step+'" href="#">'+ '<span class="label">-</span>'+ '</a>'+ '</div>'+ '</div>'); }); $('.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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spinner"><input name="cnt_10" maxlength="5" size="5" value="1" type="text"></div> <div class="spinner"><input name="cnt_11" maxlength="5" size="5" value="1" type="text"></div>

Oh, this is what was needed. Thank you) - Alexander Goroshev

Answer 2 · 2017-04-03T08:41:12

 (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('<div class="nav"> <div class="up">+</div> <div class="down">-</div> </div>'); } }); $('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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spinner"> <input type="text"> <div class="nav"> <div class="up">+</div> <div class="down">-</div> </div> </div> <div class="spinner"><input name="cnt_10" maxlength="5" size="5" value="1" type="text"></div> <div class="spinner"><input name="cnt_11" maxlength="5" size="5" value="1" type="text"></div>

The essence of the question was that you need to create a div.nav with buttons inside the .spinner , and then perform the function of changing the number.

Number Switch without HTML Editing

2 answers 2

More articles: