停止输出打印多次,如果功能激活不止一次
问题描述:
我激活与一个jQuery的onclick按钮的JavaScript函数:停止输出打印多次,如果功能激活不止一次
$('#on').click(function() {
var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {
a[i].addEventListener('click', function() {
var span = document.createElement('span');
var text = document.createTextNode(this.innerHTML + " ");
span.appendChild(text);
document.getElementsByClassName('output')[0].appendChild(span);
})
}
});
的问题是,如果按钮被点击超过一次的功能将更多的重复比一次。在这种情况下,它将多次打印输出。我如何修改javascript函数以仅打印每个点击一个字符?
答
您可以使用jQuery的.data()
功能设置标志的按钮被点击一次,当且仅当未设置标志进行。
代码:
$('#on').click(function() {
// if we have a flag that indicates this button has been clicked before,
// don't do anything.
if ($(this).data('clicked'))
return;
$(this).data('clicked', true); // set the flag
var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {
a[i].addEventListener('click', function() {
var span = document.createElement('span');
var text = document.createTextNode(this.innerHTML + " ");
span.appendChild(text);
document.getElementsByClassName('output')[0].appendChild(span);
})
}
});
答
使用jQuery的事件绑定方法one
$('#on').one("click", function() {
var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {
a[i].addEventListener('click', function() {
var span = document.createElement('span');
var text = document.createTextNode(this.innerHTML + " ");
span.appendChild(text);
document.getElementsByClassName('output')[0].appendChild(span);
})
}
});
谢谢你这么多。 – Farang 2014-12-04 06:21:04