如何通过新增变量简化重复的createDiv函数？

你的核心问题是creatediv和creatediv2两个函数逻辑几乎完全一致，仅父容器选择器不同，完全可以合并成一个通用函数。以下是优化后的完整代码，附带关键改动说明：

优化后的JavaScript代码 #

// 初始化数据数组
const sheetData = {
  a: [],
  b: []
};

// 初始化调用
makeCall({
  sheetId: '1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c',
  apiKey: 'AIzaSyALdBmQcULfcxOlzYAWalbLPW3qsqz5P6o',
  parentSelectors: {
    a: '.main-div',
    b: '.main-div2'
  },
  elementDivClass: '.sing-list',
  emptyListClass: '.empty-list'
});

function makeCall(initObj) {
  // 先隐藏所有父容器
  Object.values(initObj.parentSelectors).forEach(selector => $(selector).hide());

  $.ajax({
    url: `https://sheets.googleapis.com/v4/spreadsheets/${initObj.sheetId}/values:batchGet?ranges=Sheet1&key=${initObj.apiKey}`,
    type: 'GET',
    dataType: 'json',
    success: function(res) {
      const valueRanges = res.valueRanges;
      valueRanges.forEach(range => {
        range.values.forEach((property, index) => {
          // 跳过表头行
          if (index === 0) return;
          const status = property[3];
          // 根据status将数据存入对应数组
          if (sheetData[status]) {
            sheetData[status].push(property);
          }
        });
      });

      // 渲染两个列表
      createDiv(initObj, sheetData.a, initObj.parentSelectors.a);
      createDiv(initObj, sheetData.b, initObj.parentSelectors.b);
    }
  });

  // 通用的创建列表函数
  function createDiv(initObj, data, parentSelector) {
    data.forEach(item => {
      // 使用模板字符串拼接HTML，更易维护
      const itemHtml = `
        <div class="sing-list w-clearfix">
          <div class="img-wrap">
            <img src="${item[2]}" loading="lazy" alt="" class="listing-img">
          </div>
          <div class="listing-det">
            <h2 class="listing-head">${item[0]}</h2>
            <p>${item[3]}</p>
            <p class="listing-parag">${item[1]}</p>
          </div>
        </div>
      `;
      $(parentSelector).append(itemHtml);
    });

    // 移除示例元素、显示父容器、隐藏空列表提示
    $(initObj.elementDivClass).first().remove();
    $(parentSelector).show();
    $(initObj.emptyListClass).hide();
  }
}

关键改动说明 #

• 合并重复函数：将creatediv和creatediv2合并为createDiv，新增parentSelector参数，动态指定父容器，彻底消除代码重复
• 优化数据存储：用对象sheetData替代两个独立数组，根据status自动归类数据，逻辑更清晰
• 模板字符串替代拼接：用ES6模板字符串拼接HTML，避免大量+号，代码可读性和维护性大幅提升
• forEach替代for循环：用数组的forEach方法替代传统for循环，代码更简洁
• 统一容器隐藏逻辑：初始化时隐藏所有父容器，避免硬编码单个容器选择器
• 修复原代码bug：原creatediv2函数中错误使用了initobj.parentdivclass来显示容器，优化后改为传入的parentSelector，逻辑更准确

对应的CSS和HTML（无需改动，仅作参考） #

CSS #

.section {
  padding-top: 40px;
  padding-bottom: 40px;
}
.main-div, .main-div2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.sing-list, .sing-list2 {
  width: 30%;
  padding-right: 1%;
  padding-left: 1%;
}
.img-wrap {
  position: relative;
  width: 100%;
  padding-top: 80%;
}
.listing-img {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML #

<section class="section">
  <div class="w-layout-blockcontainer w-container">
    <h1 class="heading">SheetsCMS</h1>
    <div class="empty-list" style="display: none;">
      <div>no items to display</div>
    </div>
    <h2 class="heading">List a</h2>
    <div data-sheets-cms="" class="main-div" style="">
      <div class="sing-list w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg" loading="lazy" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="listing-head">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <h2 class="heading">List b</h2>
    <div data-sheets-cms="" class="main-div2" style="">
      <div class="sing-list2 w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg" loading="lazy" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="heading">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

内容的提问来源于stack exchange，提问作者feliel93