Как реорганизовать долго, если вы хотите?

Question

У меня есть длинное утверждение, что я хочу рефакторировать. Заявление прослушивает клик, а затем обновляет одно из пяти текстовых полей в зависимости от того, есть ли в них текстовые поля или нет. Как я могу изменить свой код, чтобы быть более эффективным.

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

это по крайней мере, легче читать. Кроме того, если ваши кнопки всегда карты + число, которое вы могли бы сделать это еще проще (не легче читать, только меньше строк & обслуживания)

$('#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">

$('input:text[id^=card]') выбирает все текстовые входы которых идентификаторы начинаются с «картами». Но тот же принцип применим и к другим типам элементов.

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