javascript - 如何使用 div 标签的类获取表单数据？

Question

我有类似的代码:

var iconContainer = document.getElementById('iconContainer');
var icon = iconContainer.getElementsByClassName("item");

for (var i = 0; i < icon.length; i++) {
  icon[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";

  });
}

<form>
  <header>
    <div class="icon-line" id="iconContainer">
      <div class="item active" id="">
        <div class="group-icon">
          <i class="fas fa-hdd"></i>
        </div>
        <span>SSD</span>
      </div>

      <div class="item" id="">
        <div class="group-icon">
          <i class="fas fa-server"></i>
        </div>
        <span>EKRAN KARTI</span>
      </div>

      <div class="item" id="">
        <div class="group-icon">
          <i class="fas fa-microchip"></i>
        </div>
        <span>İŞLEMCİ</span>
      </div>

      <div class="item" id="">
        <div class="group-icon">
          <i class="fas fa-memory"></i>
        </div>
        <span>RAM</span>
      </div>
    </div>
  </header>
</form>

我还有一个 Selection.js，可以将所选项目的类从 class="item"更改为 class="item-active"

如何使用其数据来控制所选项目？

我想使用所选项目搜索我的数据。例如，您选择了 SSD，因此，我将搜索我的 SSD.json 文件，或者您选择了 RAM，我将搜索我的 ram.js

如何做到这一点？

注意:我在服务器端使用 Node.js。

Answer 1

好的，首先你有一个 for 循环，将项目的类更改为“事件”类，我们将继续在那里添加代码。

var iconContainer = document.getElementById('iconContainer');
var icon = iconContainer.getElementsByClassName("item");

for (var i = 0; i < icon.length; i++) {
  icon[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    // ADD CODE HERE

  });
}

您必须做两件事:获取所选项目的值并通过以该值作为参数发出搜索请求将其发送到服务器。

通过获取 的 innerText 来获取所选项目的值:

...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;

并使用 fetch API(或任何支持 make xhr 请求的库)发出带有值的 get 请求:

...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;
fetch(`URL_TO_SERVER/?params=${value}`)
   .then(res => {
        // do what you want with search result
   }

剩下的工作就是服务器处理请求、获取参数、搜索相应文件并将搜索结果返回给客户端。

仅此而已。

更好的方式是，您应该使用 data-attribute 来获得更好的请求，而不是使用 innerText 中的值作为参数。您可以在这里阅读:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes