限制按钮内的点击次数 - jquery
我使用Jquery克隆了一些表单输入onclick。我想要实现的是,添加按钮内的计数器触发这两个按钮之一上的事件。如果计数为0(零),我想禁用添加按钮并为其分配一个类(不活动)。如果计数是9,我想禁用del键并为它分配一个类(not-acitve)。限制按钮内的点击次数 - jquery
我的代码如下所示:
<button id="add" class="active" type="button">Downcount (<span id="counter">9</span>)</button>
<button id="del" class="active" type="button">Upcount</button>
jQuery的是这样的:
$(document).ready(function() {
var upcount = 0;
var downcount = 0;
var start = 9;
$("#add").click(function() {
upcount++;
$("#counter").html(start - upcount + downcount);
});
$("#del").click(function() {
downcount++;
$("#counter").html(start - upcount + downcount);
});
});
我也提出了这一个小提琴:https://jsfiddle.net/phii/8zf31158/
有人可以帮助我与if语句甚至更优雅的方式来实现我的目标?
提前致谢!
更改您的方法并只使用一个counter
。
之后,您可以创建一个函数,检查您的button
的值为counter
和disable
。
$(document).ready(function() {
var counter = 9;
$("#add").click(function() {
counter++;
$("#counter").html(counter);
checkcounter();
});
$("#del").click(function() {
counter--;
$("#counter").html(counter);
checkcounter();
});
function checkcounter()
{
if(counter >= 10)
$("#add").prop("disabled",true);
else if(counter<=0)
{
$("#del").prop("disabled",true);
}
else
{
$("#add").prop("disabled",false);
$("#del").prop("disabled",false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add" class="active" type="button">Downcount (<span id="counter">9</span>)</button>
<button id="del" class="active" type="button">Upcount</button>
这对我的需求甚至更好 - 非常感谢!@Turnip解决了它,就像它满足了我在添加类时的需求。但是这真的是成功,因为它真的禁用了按钮我需要的是,因为按钮也必须停止克隆输入。非常感谢!最佳答案。我真的很感谢你的帮助! –
再次感谢!我将它实现到我的表单中,它的工作方式就像一个魅力。 –
@арнонюм没问题;) – Alexis
我认为你可以像this做的更优雅的方式来实现自己的目标。
var upcount = 9;
function updateCount() {
$("#counter").html(upcount);
}
$(document).ready(function() {
$("#add").click(function() {
(upcount < 9) && upcount++;
updateCount();
});
$("#del").click(function() {
(upcount > 0) && upcount--;
updateCount();
});
});
<button id="del" class="active" type="button">Downcount (<span id="counter">9</span>)</button>
<button id="add" class="active" type="button">Upcount</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
您可能希望相反。当计数器为零时禁用“向下”按钮,当它为9时禁用“向上”按钮。这样就不会越过0-9范围。无论如何,你可以简单地使用'$(this).prop('disabled',1);'来禁用按钮。 – haim770
当然!我想留在0到9的范围内;)你能给我一个代码示例给你的推荐吗?我真的是一个血腥的noob :( –