-2

This jquery code works and it is in use, but somehow my items filter not working with it correctly. But somehow my vanilla js working with that filter I use.

So my question is:

How I can change this jquery code to vanilla js?

$(".cat-name .cat-link").click(function () {

    let catID = $(this).data("id"),
        $allItem = $('.category')

    let $currentItem = $('.cat[data-category=' + catID + ']');
   
    $('.cat[data-category=' + catID + ']').addClass('active');
        $allItem.not($currentItem).removeClass('active');
    
    $('.all-items').removeClass('active'); // Remove active class from "All Items" tab
   
   });

Thanks if you have time to help me!

m00tor
  • 3
  • 5
  • _"But somehow **my vanilla js working with that filter** I use."_ - When it already works, then what's the problem/question? – Andreas Dec 04 '21 at 09:59
  • 1
    https://youmightnotneedjquery.com/ – Andreas Dec 04 '21 at 10:00
  • *"But somehow my vanilla js working with that filter I use."* I don't see any vanilla JS in your question. – connexo Dec 04 '21 at 10:50
  • 1
    Does this answer your question? [How can I get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-can-i-get-the-data-id-attribute) – Junior Dec 05 '21 at 07:52

1 Answers1

0

Here is a quick answer :

  • use document.querySelector() and document.querySelectorAll() to select element(s)
  • use targetElement.addEventListener('click', function() { ... }) to add click event
  • use targetElement.className to add/remove classes
  • use targetElement.getAttribute('data-...') to manage data attributes

Remember to visit Vanilla JS website for more examples

E-telier
  • 766
  • 5
  • 15