statmentの場合はどのようにリファクタリングするのですか？

Question

私はリファクタリングしたい長いif文を持っています。ステートメントはクリックをリッスンし、そのテキストボックスに何かがあるかどうかによって5つのテキストボックスの1つを更新します。コードをより効率的に変更するにはどうしたらいいですか？

$('#img1').click(function() { 
if ($('#card1').val().length === 0) { 
    $('#card1').val('A feeling of warmth'); 
} else if ($('#card2').val().length === 0) { 
    $('#card2').val('A feeling of warmth'); 
} else if ($('#card3').val().length === 0){ 
    $('#card3').val('A feeling of warmth'); 
} else if ($('#card4').val().length === 0){ 
    $('#card4').val('A feeling of warmth'); 
} else if ($('#card5').val().length === 0){ 
    $('#card5').val('A feeling of warmth'); 
} 

}); 

Answer 1

あなたはそれが読み少なくとも簡単だループ

$('#img1').click(function() { 
    var items = ["#card1", "#card2", "etc"]; 
    for(var i=0;i<items.length;i++){ 
     if ($(items[i]).val().length === 0) { 
      $(items[i]).val('A feeling of warmth'); 
     } 
    } 
}); 

を使用することができます。また、あなたのボタンは、常にカード+あなたはそれをさらにsimplier作ることができる数（読みやすくない、ただ以下の行&メンテナンス）

$('#img1').click(function() { 
    for(var i=0;i<=5;i++){ 
     if ($("#card" + i).val().length === 0) { 
      $("#card" + i).val('A feeling of warmth'); 
     } 
    } 
}); 

Answer 2

$('#img1').click(function() { 
// num can be total count of the element like $(.card).children.count 
var num = 5, // preferably dont make it hardcoded. 
    str = 'A feeling of warmth', 
    preIdStr = '#card', 
    id; 
for (var i = 1; i <= num; i += 1) { 
    id = preIdStr + i; 
    if ($(id).val().length === 0) { 
     $(id).val(str); 
    } 
} 

}）であれば、

Answer 3

JQueryを使用しているようです。あなたは、まず、空の項目を分離するセレクタとフィルタを使用することができます。

$('#img1').click(function() { 
 
    $('input:text[id^=card]') 
 
    .filter(function() { return $(this).val() == ""; }) 
 
    .first() 
 
    .val('A feeling of warmth'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="img1">CLICK ME</button><br> 
 
<input id="card1"><br> 
 
<input id="card2"><br> 
 
<input id="card3"><br> 
 
<input id="card4"><br> 
 
<input id="card5">

​​は、そのIDが「カード」で始まるすべてのテキスト入力を選択します。しかし、同じ原則が他の要素タイプにも当てはまります。

Answer 4

すべてのカードに同じclassを付けます。 次に、セレクタを使用します。$('.yourclass')

すべての要素を繰り返し処理するには、jQuery for each（.each）関数を使用します。ループ内で値をチェックし、値を設定したらfalseを返します。この出口はループです。

$('.yourclass').each(
    function() { 
     if (this.val().length === 0) { 
      this.val('your value'); 
      return false; // exit loop 
     } 
    });