forEach 循环中的条件语句

Question

我正在尝试运行数组中特定对象的独特功能。

我目前有一个 forEach 循环，它循环访问导入数据库中的不同记录，为每条记录创建一个 'panel'。

这是预览：

如您所见，第一个面板与其他面板的底部不对齐。这是因为它是一张风景照片，所以它的宽度必须更大才能补偿。但是，要做到这一点，我必须在我的 forEach 循环中有某种异常来唯一地设置该记录的宽度。

这是我写的代码：

fetch(
"https://(apiurl)/" ) //here I run a GET request to my database
.then(handleError) // skips to .catch if error is thrown
.then((data) => {
  data.records.forEach((record) => {
    let galleryitem = document.createElement("li");
    galleryitem.setAttribute("class", "splide__slide is-visible");
    galleryitem.setAttribute("aria-hidden", "false");
    galleryitem.setAttribute("tabindex", "0");
    galleryitem.setAttribute("style", "margin-right: 28px; width: 25vw");
    listing.appendChild(galleryitem);
    let gallerycontent = document.createElement("div");
    gallerycontent.setAttribute("class", "slider-square");
    galleryitem.appendChild(gallerycontent);
    let imgwrapper = document.createElement("div");
    imgwrapper.setAttribute("class", "slider-square_img");
    gallerycontent.appendChild(imgwrapper);
    let de_img = document.createElement("img");
    de_img.setAttribute("class", "slider-square_photo");
    de_img.setAttribute("src", record.fields.ArtLink);
    de_img.setAttribute("loading", "lazy");
    de_img.setAttribute("sizes", "(max-width: 479px) 84vw, (max-width: 991px) 48vw, 36vw");
    imgwrapper.appendChild(de_img);
    let textcontent = document.createElement("div");
    textcontent.setAttribute("class", "text-opacity");
    gallerycontent.appendChild(textcontent);
    let art_title = document.createElement("h3");
    art_title.setAttribute("class", "slider_title");
    art_title.textContent = record.fields.Title;
    textcontent.appendChild(art_title);
    let art_desc = document.createElement("h3");
    art_desc.setAttribute("class", "slider_descriptor");
    art_desc.textContent = record.fields.Descriptor;
    textcontent.appendChild(art_desc);
  });
})
.catch(function writeError(err) {
  // catches the error and logs it
})

我想过运行在循环中加入一个条件语句，这样只有第一张图片有自己的宽度，但没有用。 例如，我会这样做：

if (data.records.record == [0]) { galleryitem.setAttribute("style", "margin-right: 28px; width: 50vw"); }

这没有按预期工作。有什么想法吗？

（注意我正在为滑块使用 splidejs 库可能也很有用）

编辑：我已经添加了上下文的完整代码，这里是数组的一部分的屏幕截图 table >>

Answer 1

只需检查您正在迭代的项目的索引？

data.records.forEach((record, index) => {
    const galleryitem = document.createElement("li");
    galleryitem.setAttribute("aria-hidden", "false");
    galleryitem.setAttribute("tabindex", "0");
    galleryitem.style.cssText = `margin-right: 28px; width: ${index === 0 ? 50 : 25}vw`;
});

您可能还想将 galleryitem 附加到厕所内的容器中；

Answer 2

你也可以这样做:
使用 Template literals

更具可读性

fetch( 'https://(apiurl)/' ) // here I run a GET request to my database
.then( handleError )        // skips to .catch if error is thrown
.then( data =>
  {
  let LI_attr =
    { className     : 'splide__slide is-visible'
    , 'aria-hidden' : 'false'
    , tabindex      : '0'
    , style         : 'margin-right: 28px; width: 50vw' 
    }  
  data.records.forEach( (record, indx)  =>
    {
    listing.appendChild( 
      Object.assign( 
        document.createElement('li')
        , LI_attr
    ) )
    .innerHTML = `
      <div class="slider-square">
        <div class="slider-square_img">
          <img class="slider-square_photo"
              src="${record.fields.ArtLink}"
              loading="lazy"
              sizes="(max-width: 479px) 84vw, (max-width: 991px) 48vw, 36vw" >
        </div>
        <div class="text-opacity">
          <h3 class="slider_title">${record.fields.Title}</h3>
          <h3 class="lider_descriptor">${record.fields.Descriptor}</h3>
        </div>
      </div>`;
      
    if (indx===0)
      LI_attr.style = 'margin-right: 28px; width: 25vw'  // change width value for next records

    });
  })
.catch(function writeError(err) {
  // catches the error and logs it
})

forEach 循环中的条件语句

Conditional statements within a forEach loop

html

javascript

css

database

slider

我正在尝试运行数组中特定对象的独特功能。

forEach 循环中的条件语句

Conditional statements within a forEach loop

html

javascript

css

database

slider

我正在尝试 运行 数组中特定对象的独特功能。

我正在尝试运行数组中特定对象的独特功能。