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

Question

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

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

除了在第二个 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 function。 这是运行的 function 的片段：

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 function 可以打印到这些 ID。

注意：在本练习中，我尝试不使用 JQuery

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

Answer 1

您只需要该项目的索引position 吗？ 我可能会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 中，您将使用 URLSearchParams获取查询 select，如下所示：

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