在单击按钮重定向到另一个HTML文件后，如何在DOM上打印数组的特定索引？

Question

我正在使用Bootstrap Carousel，但是通过循环通过名为“ Capris”的数组，通过DOM生成了Carousel的幻灯片。每个幻灯片上都有一个按钮，该按钮也特定于每个索引。

[我要做的是，当用户单击其中一个按钮时，它将按钮重定向到另一个HTML文件，并在另一个HTML页面上将相同的索引打印到DOM。

除了将索引打印到第二个HTML文件上的DOM之外，我已经做了所有事情。这是我的轮播和按钮的事件侦听器代码段：

const buyCapriBttn = () => {
  for (let i = 0; i < capris.length; i++) {
    document.querySelector(`#${capris[i].name}`).addEventListener('click', function () {generateProduct(capris[i])});
  }
}

const capriCarousel = () => {
  let domString = '';
  for (let i = 0; i < capris.length; i++) {
    if (i === 0) {
      domString += `
    <div class="carousel-item active">
      <img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
      <div class="d-flex justify-content-center">
        <a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html" role="button">Buy ${capris[i].name}</a>
      </div>
      <p class="capri-description">${capris[i].description}</p>
    </div>
    `;
    } else if (i >= 1) {
      domString += `
      <div class="carousel-item">
        <img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
        <div class="d-flex justify-content-center">
          <a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html" role="button">Buy ${capris[i].name}</a>
        </div>
        <p class="capri-description">${capris[i].description}</p>
      </div>
      `;
    } else;
  }
  printToDom("#carousel-items", domString);
  buyCapriBttn();
}

单击按钮时，它将为该索引运行generateProduct功能。这是运行该功能的代码段：

const generateProduct = (selectedPants) => {
  domString = '';
  console.log(selectedPants);
  for (let i = 0; i < capris.length; i++) {
    if (capris[i] === selectedPants) {
    domString += `
    <div id="caprisDom">
      <img id="buycaprispic" src="${capris[i].imageUrl}">
      <div id="nameandrating">
        <h5 id="buycaprisname">${capris[i].name}</h5><h2>☆☆☆☆☆</h2>
      </div>
      <div class="caprisinfobox">
        <p id="caprisinfo">${capris[i].description}</p>
        <div class="sizeandprice">
          <div id="sizeselector">
            <label id="sizelabel">Size:</label>
            <select name="sizelist" id="size">
            </select>
          </div>
          <h3 id="price">$${capris[i].price}</h3>
        </div>
        <button id="cartbutton">Add to Cart</button>
      </div>
    </div>
    `;
    }
  }
  printToDom('#caprismain', domString);
}

我也有一个printToDom函数，如果需要的话，也可以打印到这些ID。

注意：在本练习中，我试图not使用JQuery

非常感谢任何想法和帮助！

Answer 1

您是否只需要该项目的index位置？我可能会在a声明中动态添加它。类似于<a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>

因此它应该看起来像这样：

const capriCarousel = () => {
  let domString = '';
  for (let i = 0; i < capris.length; i++) {
    if (i === 0) {
      domString += `
    <div class="carousel-item active">
      <img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
      <div class="d-flex justify-content-center">
        <a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>
      </div>
      <p class="capri-description">${capris[i].description}</p>
    </div>
    `;
    } else if (i >= 1) {
      domString += `
      <div class="carousel-item">
        <img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
        <div class="d-flex justify-content-center">
          <a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>
        </div>
        <p class="capri-description">${capris[i].description}</p>
      </div>
      `;
    } else;
  }
  printToDom("#carousel-items", domString);
  buyCapriBttn();
}

然后，在另一页中，在您的js中，您将grab使用URLSearchParams选择查询，如下所示：

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('index');