[英]Allow value -1 when clicking on a button and link, but just one time (the first time clicked upon) without disabling the button/link
我有以下脚本:
<script language=javascript>
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input type=button value='-' onclick='javascript:process(-1)'>
<a id="v" href="#" onclick='javascript:process(-1)'>minus</a>
如果单击该按钮,它将从总数中减去1(3)。 这同样适用于负链接。 现在,这一切都很好。
问题是我想允许每个人一次减1。 无需禁用按钮/链接。
我需要的例子:所以我点击按钮:3 - > 2.现在我再次点击按钮,不会发生任何事情2停留2.现在我点击减号链接,2 - > 1.再次点击链接,没有任何意义发生1次停留1
当然,这可以混合在一起。 最主要的是,他们每个人都只能做一次-1(第一次点击)。
这个怎么做?
亲切的问候,莫里斯
第一:在onclick属性中不需要javascript:
-prefix。
您可以通过删除click上的onclick
方法(如下所示)并在此小提琴中实现所需的行为: http : //jsfiddle.net/XPHLU/1/
<script>
function process(v, elem){
if(elem && elem.onclick){
elem.onclick = null;
}
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input type=button value='-' onclick='process(-1, this);'>
<a id="v" href="#" onclick='process(-1, this)'>minus</a>
<script language=javascript>
$(document).ready(function(){
$("#negativeButton, #v").one("click", {arg: -1}, function(event){
//.one() registers a 'click' event, execute it once, and unbind it.
//stop propagation to the other click events.
event.stopImmediatePropagation();
//stop from moving to href=""
event.preventDefault();
process(event.data.arg, this);
});
//optionally, you can register a .click() after this as well for the same buttons. .one() will only remove that 'one' click event.
});
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input id="negativeButton" type="button" value='-' >
<a id="v" href="#">minus</a>
由于这个问题是在jQuery下标记的,我为你提供了一个在jQuery中做的方法! 从长远来看,使用此功能可以帮助您获得更清晰的代码并解决此类将来的问题;)
演示: http : //jsfiddle.net/NtHwN/4/
<input size=10 id="sum" value="3">
<input class="minus" type=button value="-">
<a class="minus" href="#">minus</a>
$(document).ready(function() {
$(".minus").one("click", function(){
var value = parseInt($("#sum").val());
$("#sum").val(value -1);
});
});
<input type=button value='-' onclick='javascript:process(-1)' id="button-to-click">
删除单击处理程序:
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
document.getElementById('button-to-click').onclick = null;
}
或多个
<input type=button value='-' onclick='javascript:process(this, -1)'>
删除点击处理程序:
function process(obj, v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
obj.onclick = null;
}
嗯......这个应该有效。 JSFiddle在这里 。
HTML(略有变化):
<input type=test size=10 id='v' name='v' value='3'></input>
<input id="i" type=button value='Minus'></button>
<a id="l" href="javascript://">minus</a>
注意:我不一定建议使用javascript://
。
JavaScript的:
function appendEvent(id) {
document.getElementById(id).addEventListener('click', (function() {
var clicked = false;
var inputEl = document.getElementById('v');
return function() {
if (!clicked) {
var value = parseInt(inputEl .value);
inputEl.value = --value;
clicked = true;
};
};
}()));
}
appendEvent('i');
appendEvent('l');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.