Как перевести код jquery на чистый JavaScript?

Question

[Alexander]

Помогите пожалуйста перевести вот этот код, буду очень благодарен за помощь

$(function() {

  let filter = $("[data-filter]");

  filter.on("click", function(event) {
      event.preventDefault();

      let cat = $(this).data('filter');

      if(cat == 'all') {
         
          $("[data-cat]").removeClass("hide");
      } else {
          $("[data-cat]").each(function() {
              let workCat = $(this).data('cat');

              if(workCat != cat) {
                  $(this).addClass('hide');
              } else {
                  $(this).removeClass('hide');
              }
          });
      }
  });
});

Answer 1

[Rsa97]

You-Dont-Need-jQuery

Answer 2

[Алексей Ярков]

Не проверял, но что-то типа:

document.addEventListener("DOMContentLoaded", function() {
  const filters = document.querySelectorAll("[data-filter]");

  Array.from(filters).forEach(filter => {
    filter.addEventListener("click", function(event) {
      event.preventDefault();

      const categoryName = filter.dataset["filter"];
      const categories = document.querySelectorAll("[data-cat]");

      if (categoryName === "all") {
        Array.from(categories).forEach(category =>
          category.classList.remove("hide")
        );
      } else {
        Array.from(categories).forEach(category => {
          const workCat = category.dataset["cat"];

          if (workCat !== categoryName) {
            category.classList.add("hide");
          } else {
            category.classList.remove("hide");
          }
        });
      }
    });
  });
});

Answer 3

[Stalker_RED]

Comments

[Alexander]

спасибо большое!