Conversion from JQuery to Javascript

Question

I am trying to convert the following jQuery function to Javascript (to use in a Vue.js component).

$(".price-block a").on("click", function() {
  $(".price-block")
    .find(".dropdown-container")
    .toggleClass("is-open");
});

This is what I have so far (not working):

document.getElementsByClassname(".price-block a").addEventListener("click", displayOptions);

function displayOptions() {
  document.querySelector("price-block a").querySelectorAll('.dropdown-container').toggle('is-open');
}

Anyone able to help? Or is there an online converter?

I think it should return a list. The function I want to convert is from this code: ```https://codepen.io/paulkmiller/pen/jywwqa?editors=0010``` — Derek C, Oct 25 '19 at 09:01
`document.querySelectorAll` returns all matched elements as NodeList. It can be converted to Array using `Array.prototype.slice.call(document.querySelectorAll(selector));` or any of the methods outlined in makeArray — sugars, Oct 25 '19 at 09:02
@Quentin please link me to the previous question, I would like to go through it and the solution. — Derek C, Oct 25 '19 at 09:02
@DerekC — There's a big yellow box at the top of the page with the link in it. — Quentin, Oct 25 '19 at 09:05
@Quentin The dupe is not addressing all issues in the conversion — mplungjan, Oct 25 '19 at 09:05
Recommend this - [You (Might) Don't Need jQuery](https://github.com/nefe/You-Dont-Need-jQuery) — sugars, Oct 25 '19 at 09:07

mplungjan · Accepted Answer · 2019-10-25T09:13:42.820

0

Here I assume more than one dropdown per form.

[...document.querySelectorAll(".price-block a")].forEach(el => el.addEventListener("click", displayOptions));

function displayOptions() {
  [...this.closest("form").querySelectorAll('.dropdown-container')].forEach(el => el.classList.toggle('is-open') );
}

If only one per form, then use this

  this.closest("form").querySelector('.dropdown-container').classList.toggle('is-open');

Delegated from each form:

[...document.querySelectorAll(".price-block")].forEach(el => el.addEventListener("click", displayOptions));

function displayOptions(e) {
  if (e.target.tagName === "A") { 
    [...e.currentTarget.querySelectorAll('.dropdown-container')] 
      .forEach(el => el.classList.toggle('is-open') );
  }
}

edited Oct 25 '19 at 09:13

answered Oct 25 '19 at 09:01

mplungjan

169,008
28
173
236

Downvoter, please comment! – mplungjan Oct 25 '19 at 09:05
This helps, but it only works on the first dropdown. – Derek C Oct 25 '19 at 09:06
1

@DerekC see update – mplungjan Oct 25 '19 at 09:13

Conversion from JQuery to Javascript

1 Answers1