Javascript:哪些实现更有效/更好?

时间:2012-11-08 06:24:41

标签: javascript jquery

我有一个图标,点击后会增加数字输入的值。

我最初把它写成:

 $('.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());
 });

有没有首选的方法呢?如果是这样,为什么?

2 个答案:

答案 0 :(得分: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() );

答案 1 :(得分:0)

输入是什么意思?它应该是文本输入还是只是一个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);     
});