我有类似的代码：
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。
好的，首先您有一个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
});
}
您将必须做两件事：获取选定项目的值，并通过以该值作为参数的searh请求将其发送到服务器。
通过获取的innerText来获取所选项目的值：
...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;
并使用fetchAPI（或任何支持make xhr request的库）发出带有值的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
}
剩下的工作就是服务器处理请求，获取参数，搜索相应文件并将搜索结果返回给客户端的工作。
就这样。
以更好的方式，innerText应该使用data-attribute更好的请求，而不是使用来自value的参数。您可以在这里阅读：https : //developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句