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