javascript - 如何将硬编码的 jQuery 代码压缩为更小的通用代码？

Question

我有一个代码可以完美地工作，因为它是硬编码的，但非常大。我想简化这段代码，使其通用，当然也更小。有人知道怎么做这个吗？由于它太大了，我将缩小它来回答这个问题。

    var theform1 = $('#form1').find('.state option');        
    var stateForm1 = Object.keys(localStorage).filter(key => key.endsWith('-state1'));
    var stateChoice1 = JSON.parse(localStorage.getItem(stateForm1));

    var theform2 = $('#form2').find('.state option');        
    var stateForm2 = Object.keys(localStorage).filter(key => key.endsWith('-state2'));
    var stateChoice2 = JSON.parse(localStorage.getItem(stateForm2));

    var theform3 = $('#form3').find('.state option');        
    var stateForm3 = Object.keys(localStorage).filter(key => key.endsWith('-state3'));
    var stateChoice3 = JSON.parse(localStorage.getItem(stateForm3));

    if (localStorage.getItem(stateForm1)) {            
        $(theform1).empty();
        $(theform1).val(stateChoice1).append(`<option value="${stateChoice1}">${stateChoice1}</option>`).trigger('window.load');                    
    }; 

    if (localStorage.getItem(stateForm2)) {            
        $(theform2).empty();
        $(theform2).val(stateChoice2).append(`<option value="${stateChoice2}">${stateChoice2}</option>`).trigger('window.load');                    
    };

    if (localStorage.getItem(stateForm3)) {            
        $(theform3).empty(); 
        $(theform3).val(stateChoice3).append(`<option value="${stateChoice3}">${stateChoice3}</option>`).trigger('window.load');

    };        

HTML 标记如下:

    <form id="form1" autocomplete="off">
   <select id="country1" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
   </select> 
   <select id="state1" class="state" name="state">
    <option value="" selected="selected">Select state</option>
   </select> 
   <select id="city1" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>
  <form id="form2" autocomplete="off">
   <select id="country2" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
    </select> 
   <select id="state2" class="state" name="state">
    <option value="" selected="selected">Select state</option>
   </select> 
   <select id="city2" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>
  <form id="form3" autocomplete="off">
   <select id="country3" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
   </select> 
   <select id="state3" class="state" name="state">
    <option value="" selected="selected">Select state</option>
    </select> 
   <select id="city3" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>

Answer 1

也许您正在寻找这个压缩版本:

$('#form1,#form2,#form3').each(function () {
    var index = this.id.substring(this.id.length - 1, this.id.length);
    var stateForm = Object.keys(localStorage).filter(key => key.endsWith('-state' + index));
    var stateChoice = JSON.parse(localStorage.getItem(stateForm));

    if (localStorage.getItem(stateForm)) {
        var theform = $(this).find('.state option').empty();

        theform.val(stateChoice)
                .append(`<option value="${stateChoice}">${stateChoice}</option>`)
                .trigger('window.load');
    }
});

<小时/>

如果您有超过 10 个表单，且索引从 1 增加到 99 或 999...您可以将表单 id 的命名方式编辑为:form01 form02 form03 或 form001 form002 form003...

然后，因为所有 id 名称都以 form 开头，您可以像这样更新选择器:

将 $('#form1,#form2,#form3') 更改为 $('[id^="form"]')。该选择器的意思是:选择一些包含 id 以 form 开头的元素。

最后，如果您的表单 ID 后跟 2 位数字 (form01)，则更新该行以获取索引:

var index = this.id.substring(this.id.length - 2, this.id.length);

您可以对后跟 3 位数字的 ID (form001) 执行相同的操作:

var index = this.id.substring(this.id.length - 3, this.id.length);