Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
|
1 2 3 4 5 |
<div class="count"> <button type="button" class="count_minus"></button> <input type="text" name="" value="1" class="count_input"> <button type="button" class="count_plus"></button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.count { display: flex; } .count_minus, .count_plus { position: relative; width: 30px; height: 30px; padding: 0; } .count_minus::before, .count_plus::before, .count_plus::after { content: ''; display: block; width: 10px; height: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; } .count_plus::after { width: 2px; height: 10px; } .count_input { width: 30px; height: 30px; margin: 0 5px; text-align: center; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
jQuery(document).ready(function($) { // +/- (function(){ var $counts = $('.count'); if (!$counts.length) return; $counts.each(function (i, e) { var $count = $(e), $input = $count.find('.count_input'), $trigs = $count.find('button'); $trigs.on('click', function() { var $tr = $(this), val = parseInt($input.val()), num = 0; // + if ($tr.hasClass('count_plus')) { num = val + 1; } // - else if ($tr.hasClass('count_minus')) { num = (val > 1) ? val - 1 : 1; } if (num > 0) { $input.val(num); } }); }); })(); }); |