javascript - Javascript：这些实现中哪个更高效/更好？

Question

我有一个图标，单击该图标会增加数字输入的值。

我最初将其写为：

 $('.icon-chevron-up').click(function(){
      var input = $(this).next();
  var value = eval(input.val());
  input.val((value+1).toString());
  $(this).next.val(value+1);
 });

然后我将其重写为：

 $('.icon-chevron-up').click(function(){
  $(this).next().val((eval($(this).next().val()) + 1).toString());
 });

有这样做的首选方法吗？如果是这样，为什么？

Answer 1

这些都不是最好的效率。eval不需要，如果你想要性能，你应该缓存你的选择器。有几种方法可以提高效率，但我会这样做：

$('.icon-chevron-up').click(function() {
  var $this = $(this), 
      val = $this.next().val();
  $this.next().val( ++val + '' );
});

++转换val为一个数字并添加1. + ''将前一个数字转换为字符串。

如果你想要一些不那么简洁的东西（我想更具可读性）：

$this.next().val( (parseInt( val,10 ) + 1).toString() );

Answer 2

你说的输入是什么意思？它应该是文本输入还是只是一个html标签？

<button class="icon-chevron-up">Increase</button>
<div id="numinput">12</div>

var input = $('#numinput').html();
$('.icon-chevron-up').click(function(){    
    input++;
    $('#numinput').html(input);     
});