如果声明,如何重构？

Question

我有一个很长的if语句,我想要重构.该语句侦听单击,然后根据这些文本框中是否包含任何内容更新五个文本框中的一个.我怎样才能更改代码以提高效率.

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