如何通过添加新变量来简化重复的creativ函数？

Question

我想知道是否有更简单的方法来编写这段代码。我注意到 creatediv 有点重复，唯一的区别是将附加到过滤列表的类 (.parentdivclass)。

我尝试将第三个变量添加到函数creatediv()中，它将动态替换.parentclass，但由于我是一个javascript初学者，所以我没能做到这一点。

我的 Google 表格 = https://docs.google.com/spreadsheets/d/1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c/edit#gid=0

您的帮助将不胜感激，谢谢！

var sheetdata = [];
var sheetdata2 = [];
//replace it with your values
makecall({
  'sheetid' : '1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c',
  'apikey' : 'AIzaSyALdBmQcULfcxOlzYAWalbLPW3qsqz5P6o',
  'parentdivclass' : '.main-div',
  'parentdivclass2' : '.main-div2',
  'elementdivclass' : '.sing-list',
  'emptylist' : '.empty-list',
});

function makecall(initobj)
{
  $('.main-div').hide();
  //&ranges=Sheet2
  $.ajax({
    url: "https://sheets.googleapis.com/v4/spreadsheets/"+initobj.sheetid+"/values:batchGet?ranges=Sheet1&key="+initobj.apikey,
    type: 'GET',
    dataType: 'json', // added data type
    success: function(res) {
      let valuerage = res.valueRanges;
      valuerage.forEach((val, mainindex) => {
        val.values.forEach((property,index) => {
          let status = (property[3]);
          if(index != 0) {
            if(status=="a")
            {
              sheetdata.push(property);
            }

            if(status=="b")
            {
              sheetdata2.push(property);
            } 
          }
        });
        creatediv(initobj,sheetdata);
        creatediv2(initobj,sheetdata2);
      });
    }
  });


  function creatediv(initobj,homedat)
  {
    for(let x=0; x<homedat.length;x++)
    {
      let singdat = homedat[x];
      $(initobj.parentdivclass).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
    }
    $(initobj.elementdivclass)[0].remove();
    $(initobj.parentdivclass).show();
    $(initobj.emptylist).hide();
  }

  function creatediv2(initobj,homedat)
  {
    for(let x=0; x<homedat.length;x++)
    {
      let singdat = homedat[x];
      $(initobj.parentdivclass2).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
    }
    $(initobj.elementdivclass)[0].remove();
    $(initobj.parentdivclass).show();
    $(initobj.emptylist).hide();
  }
  
}

.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;
}

<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=&quot;lazy&quot;" 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=&quot;lazy&quot;" 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>
  </div>
</section>

Answer 1

假设您只想传递属性名称，您可以像这样添加第三个变量：

function creatediv(initobj,homedat,parent)
{
  for(let x=0; x<homedat.length;x++)
  {
    let singdat = homedat[x];
    $(initobj[parent]).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
  }
  $(initobj.elementdivclass)[0].remove();
  $(initobj[parent]).show();
  $(initobj.emptylist).hide();
}

// then call like this
creatediv(initobj,sheetdata,"parentdivclass");
creatediv(initobj,sheetdata2,"parentdivclass2");