Как я могу получить данные формы из тега div, используя его класс? - PullRequest
Новая
       5

Как я могу получить данные формы из тега div, используя его класс?

1 голос
/ 07 февраля 2020

У меня есть код что-то вроде: 

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>

Также у меня есть выбор. js, который изменяет класс выбранного элемента с class = "item" на class = "item-active"

Как можно управлять выбранным элементом, используя его данные?

Я хочу искать в моих данных, используя выбранный элемент. Например, вы выбрали SSD, так что я буду искать на моем SSD-файле. json или вы выбрали RAM, я буду искать на моей оперативной памяти. js

Как это сделать?

Примечание: я использую Node.js на стороне сервера.

1 Ответ

1 голос
/ 07 февраля 2020

Хорошо, во-первых, у вас есть for l oop, который меняет класс элемента на «активный», мы продолжим добавлять код туда. 

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

  });
}

Вам нужно будет сделать 2 вещи : получить значение выбранного элемента и отправить его на сервер, выполнив запрос на поиск со значением в качестве параметров.

Получить значение выбранного элемента, получив значение innerText: 

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

И сделать запрос get со значением с помощью fetch API (или любых библиотек, которые поддерживают make xhr request): 

...
// 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

...