我认为这是因为检查是否超过了最大值或最小值并没有在您认为的所有时间发生。为了防止这种情况,我会在您的
MoreUp()
和
MoreDown()
功能,以便每次单击相应的按钮时,您都可以确保不超过或低于限制。
if (temp < max) {
和
if (temp > min) {
,如下面的代码片段所示。
(function($) {
$.fn.spiner = function() {
$(this).each(function() {
var errors = {
min: "Looks like you are at Min ",
max: "looks like you are at Max"
};
var temp = 0.0;
var toUp = null;
var ivUp = null;
var toDown = null;
var ivDown = null;
var inc = $(this).find('.btn-add');
var out = $(this).find('.btn-nums');
var dec = $(this).find('.btn-less');
var min = $(this).data('min');
var max = $(this).data('max');
var step = $(this).data('step');
var type = $(this).data('type');
var maxerr = $(this).data('maxerror');
var minerr = $(this).data('minerror');
function MaxStop() {
if (temp >= max) {
clearTimeout(toUp);
clearInterval(ivUp);
$('.btn-add').prop('disabled', true);
$('.btn-less').prop('disabled', true);
dec.prop('disabled', false);
$('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
}
}
function MinStop() {
if (temp <= min) {
clearTimeout(toDown);
clearInterval(ivDown);
$('.btn-add').prop('disabled', true);
$('.btn-less').prop('disabled', true);
inc.prop('disabled', false);
$('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
}
}
function MoreUp() {
if (temp < max) {
temp = temp + step;
if (temp > 0) {
out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
} else {
out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
}
MaxStop();
}
}
function MoreDown() {
if (temp > min) {
temp = temp - step;
if (temp > 0) {
out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
} else {
out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
}
MinStop();
}
}
inc.on("mousedown", function() {
$(".btn-less").prop('disabled', false);
$(".btn-add").prop('disabled', false);
$('.result').children().addClass('fadeOutDown');
temp = temp + step;
if (temp > 0) {
out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
} else {
out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
}
toUp = setTimeout(function() {
ivUp = setInterval(MoreUp, 75);
}, 500);
})
.on("mouseup mouseleave", function() {
clearTimeout(toUp);
clearInterval(ivUp);
MaxStop();
});
dec.on("mousedown", function() {
$(".btn-less").prop('disabled', false);
$(".btn-add").prop('disabled', false);
$('.result').children().addClass('fadeOutDown');
temp = temp - step;
if (temp > 0) {
out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
} else {
out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
}
toDown = setTimeout(function() {
ivDown = setInterval(MoreDown, 75);
}, 500);
})
.on("mouseup mouseleave", function() {
clearTimeout(toDown);
clearInterval(ivDown);
MinStop();
});
});
}
}(jQuery));
$('.spiner').spiner();
body {
padding-top: 10px;
}
.btn-prescriptis .btn {
border-radius: 0px;
max-height: 46px;
cursor: pointer;
width: 50px;
}
.btn-prescriptis .btn-nums {
background: #fff !important;
color: #555 !important;
outline: none !important;
box-shadow: none !important;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min">
<button type="button" class="btn btn-secondary btn-less">-</button>
<button type="button" class="btn btn-secondary btn-nums">0.00</button>
<button type="button" class="btn btn-secondary btn-add">+</button>
</div>
<div class="container">
<div class="col-12 result"></div>
</div>
