如何使用其類從 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
   }

剩下的就是您的服務器處理請求、獲取參數、搜索相應文件並將搜索結果返回給客戶端的工作。

就這樣。

更好的方法是，不要使用來自innerText值作為參數，您應該使用data-attribute來獲得更好的請求。 你可以在這里閱讀： https : //developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes