Question

我有四个div，每个div包含标题，图像和按钮。我如何才能单击该按钮以选择仅驻留的div的详细信息。我计划仅对所有四个div使用一个函数，因为我将在页面上创建更多的div。

我创建了div并共享相同的ID。每个div都有自己的标题，图像和按钮。创建函数并使用onclick事件侦听器后，即使我单击第二，第三或第四个，该函数也始终返回第一个div的值。

我是JS的新手，但不怕成长和掌握它。我需要帮助。谢谢

const forms = document.querySelectorAll("button[type=submit]");
for (const form of forms) {
  form.addEventListener('click', function(event) {
    let productName = document.getElementById('productName').innerText;
    let productImg = document.getElementById('productImg').src;
    let package = document.getElementById('package').value;

    alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
  })
}

form {
  width: 25%;
  height: inherit;
  overflow: auto;
  float: left;
}

<body>
  <form id="form">
    <h1 id="productName">Div 1</h1>
    <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 id="productName">Div 2</h1>
    <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 id="productName">Div 3</h1>
    <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 class="productName">Div 4</h1>
    <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

如前所述，我的期望是让div的按钮将标题，图像源和来自select选项的用户输入的详细信息移到localStorage，以便我随后可以在应用程序的其他页面上使用它。

Answer 1

该页面的

个ID must be unique。我建议改用类。
这包括“ productName”，“ productImg”，“ package”和“ form”的类。

我还建议将“提交”处理程序绑定到表单，而不是将“绑定”处理程序绑定到按钮。这样，您就可以使用this keyword在提交的表单中选择类。

下面，我使用preventDefault()来阻止默认的“提交”操作。

这是一个示范：

const forms = document.querySelectorAll(".form");

for (const form of forms) {
  form.addEventListener('submit', function(event) {

    event.preventDefault();

    let productName = this.querySelector('.productName').innerText;
    let productImg = this.querySelector('.productImg').src;
    let package = this.querySelector('.package').value;

    alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);

  });
}

.form {
  width: 25%;
  height: inherit;
  overflow: auto;
  float: left;
}

<form class="form">
  <h1 class="productName">Div 1</h1>
  <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 2</h1>
  <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 3</h1>
  <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 4</h1>
  <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

如何通过单击功能获取div中元素的详细信息

1 个答案: