Javascript 如何将硬编码的jQuery代码压缩成更小的通用代码？

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

    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>

---

也许您正在寻找此压缩版本：

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

对于ID，您可以使用相同的方法执行以下3位数字form001：

循环遍历所有select.state并从父窗体获取编号

比如：

$('select.state').each(function() {
  const $sel = $(this),
    formNum = $sel.closest('form').attr('id').replace('form', ''),  
    stateForm = Object.keys(localStorage).find(key => key.endsWith(`-state${formNum }`)),
    stateChoice = localStorage.getItem(stateForm);


  if (stateChoice) {
    $sel.append(new Option(stateChoice. stateChoice))
      .val(stateChoice)
      .trigger('window.load');
  }

})

---

注意：我更改了过滤器以查找键，因为过滤器返回一个数组

，如果找到了什么，您可以循环state1-stateX并追加：但首先让我们摆脱jQuery，它是一个大tbh。但是为了给出准确的答案，我们需要更多关于你当前代码的信息。谢谢你的回复。你还需要从我的代码中得到什么才能找到可行的答案？这里有些逻辑是没有道理的。例如，您正在向getItem传递一个数组。另外，将每个选项中的所有选项设置为相同的值您是对的，但我想他希望不使用jQuery。@SebastianWaldbauer OP只是询问如何消除重复代码Hello@Tan，您的代码看起来与我要查找的代码非常接近，但不幸的是，它不太有效。请提供更多背景信息。。localstorage setItem数据动态来自数据库。这里的问题是试图找到一种在刷新页面时获取项目的方法。我所拥有的硬编码的东西工作得非常好，但是它太大了，需要5天的时间浏览器才能完成代码，哈哈。你好@T–n你的代码工作得很好！唯一的问题是加载页面时需要立即加载。我用：window.load=$document.readyfunctionelem ThxI打开了脚本，但它没有运行。我还尝试将它与两个过滤器一起使用以查找。不幸的是，两者都不起作用。您需要进行一些基本的调试。正如我在上面的评论中提到的，这段代码中有一些奇怪的地方，如果没有这些，就很难让人信服。由于数据来自数据库，因此无法在此处复制。我想我会玩弄你们的答案和T–n的答案，看看我是否能得到一些功能。如果你有任何其他想法，请告诉我。如果不需要的话，我不想保留我的硬编码工作。谢谢大家

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

$('select.state').each(function() {
  const $sel = $(this),
    formNum = $sel.closest('form').attr('id').replace('form', ''),  
    stateForm = Object.keys(localStorage).find(key => key.endsWith(`-state${formNum }`)),
    stateChoice = localStorage.getItem(stateForm);


  if (stateChoice) {
    $sel.append(new Option(stateChoice. stateChoice))
      .val(stateChoice)
      .trigger('window.load');
  }

})