Question

我使用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函数以便每次点击只打印一个字符？

实施例： http://jsfiddle.net/874Ljaq1/

Answer 1

使用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);
        })
   }
});

Answer 2

您可以使用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);
        })
    }
});

如果多次激活功能，则多次停止输出打印

2 个答案: