Фев
18
2015
18
2015
jQuery /
Javascript input с плюсом и минусом
Скрипт при нажатии кнопок + или — увеличивалось/уменьшалось соответственно на 3 либо другое кратное число заданное в параметре input value=»3″.
Пример:
-
+
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> .btn { width: 103px; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; color: #FFF; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-image: -webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%); background-image: linear-gradient(to bottom,#428bca 0,#2d6ca2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-repeat: repeat-x; border-color: #2b669a; } .form-control { width: 100px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555; vertical-align: middle; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } </style> <script> jQuery(document).ready(function($) { $('.q-minus').click(function () { var $input = $(this).parent().find('input'); var val = +$input[0].defaultValue; var count = parseInt($input.val()) - val; count = count < val ? val : count; $input.val(count); $input.change(); return false; }); $('.q-plus').click(function () { var $input = $(this).parent().find('input'); var val = +$input[0].defaultValue; $input.val(parseInt($input.val()) + val); $input.change(); return false; }); }); </script> </head> <body> <div class="opt-quontity" style="white-space:nowrap;">> <span class="q-minus btn">-</span> <input class="form-controls" type="text" value="3"> <span class="q-plus btn">+</span> </div> </body>
Метки: html, javascript