javascript - 如何重构长if语句？

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