写一个计数器来统计点击次数答案

【问题标题】：Writing a counter to count the number of clicks写一个计数器来统计点击次数
【发布时间】：2015-03-27 01:02:39
【问题描述】：

我的网站上有两个按钮。下一个和上一个。我想编写一个代码来每次单击下一个时增加值，并在每次单击上一个时减小值。我希望该值显示在输入中。但输入中显示的值始终为 0，不会随着点击而改变。

这是我的代码：

function count(){
    var $counter=0;
    $(".next-button").click(function() {
         $counter=$counter+1;
    });
    $(".previous").click(function() {
        $counter=$counter-1;
    });
    return $counter;
}

document.getElementById('counter').value =count();

【问题讨论】：

这是因为 count() 总是将 $counter 重置为 0 。另外，Javascript 不是 PHP。不需要$ 符号。

标签： javascript jquery counter

【解决方案1】：

此函数中不需要return。事实上，你根本不需要函数。而是在更新时显示counter。

var $counter=0;
$(".next-button").click(function() {
     $('#counter').val($counter++);
});
$(".previous").click(function() {
    $('#counter').val($counter--);
});

【讨论】：

【解决方案2】：

您应该在每次更改元素时更新元素中的值：

(function count(){
    var counter=0,
        $container = $('#counter');
    $(".next-button").click(function() {
        $container.text(++counter);
    });
    $(".previous").click(function() {
        $container.text(--counter);
    });
})();

【讨论】：

【解决方案3】：

全局声明计数器，使其仅初始化一次

var $counter=0;
		var count=document.getElementById('counter');
    	$(".next").click(function() {
         	count.value=++$counter;
    	});
    	$(".pre").click(function() {
        	count.value=--$counter;
        	
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="next">next</button>
	<button class="pre">pre</button>
	<input type="text" id="counter" value="0" />

【讨论】：

为什么要将 click 函数嵌套在 count() 中？这听起来不正确。

【解决方案4】：

您的代码包含多个错误。您在 count() 函数中将变量重置为 0，并将 click() 函数放入函数中。

var counter=0;
function count(){
    return counter;
}

$(".next-button").click(function() {
    counter = counter+1;
});
$(".previous").click(function() {
    counter = counter-1;
});

$('#counter').val(count());
// or 
$('#counter').val(counter);

我假设$('#counter') 是一个输入文本框。

附言变量不需要前缀$。扩展 reading 关于这个匈牙利符号：何时使用，何时不使用。

【讨论】：

【解决方案5】：

你可以这样做：

var $counter = 0;

$(".next-button").click(function() {
    $counter = $counter + 1;
    refreshCount();
});
$(".previous").click(function() {
    $counter = $counter - 1;
    refreshCount();
});

function refreshCount() {
    document.getElementById('counter').value = $counter;
}

//init
refreshCount();

【讨论】：

不建议将传统的Javascript DOM与jQuery对象混合，但代码仍然有效。
@Raptor 是的。使用这个：$('#counter').val( $counter ); 更好~

【解决方案6】：

首先，你的赋值表达式实际上是运行计数函数。

document.getElementById('counter').value =count();

count函数返回0。

(function() {
  var $counter = 0;

  var add = function() {
    $counter ++;
    setCounterValue();
  }

  var del = function() {
    $counter --;
    setCounterValue();  
  }

  var setCounterValue = function() {
    document.getElementById('counter').value = $counter;        
  }

  $(".next-button").bind("click", add);

  $(".previous").bind("click", del);
})()

【讨论】：