+ 16

How can i convert jQuery into pure JavaScript ?

is there online resource to convert jQuery into JavaScript ? Can anyone convert this below code for instance $('.trigger').on('click', function(){ $(this).toggleClass('clicked'); });

19th Dec 2018, 5:14 PM
UwU Discover Me
12 Respuestas
+ 12
For all the same class element triggering, we need querySelectorAll function to include all elements, and set each event listener separately. var triggers = document.querySelectorAll('.trigger'); triggers.forEach(t=>t.addEventListener('click', ()=> t.classList.toggle('clicked') , false)); https://code.sololearn.com/WbACFhqjJ5I0/?ref=app So this is why jQuery is most convenient, but also more time consuming when running a simple class trigger, for me, i rather stick to pure js which is more verbose but yet more code efficient in term of faster execution. Don't forget also, we need to load all the jQuery lib, before we could use the jQuery on function. For js code execution speed comparison, please check out this code. https://code.sololearn.com/Wu20kv75u57T/?ref=app
20th Dec 2018, 3:11 AM
Calviղ
Calviղ - avatar
+ 8
Vasiliy jay Aditya Khandelwal Your answer is partially correct. Since $('.trigger').on could be triggered from all the same class elements. Whereas your js only triggered by the first class element. https://code.sololearn.com/W1y1rHcxASRP/?ref=app
20th Dec 2018, 1:47 AM
Calviղ
Calviղ - avatar
+ 8
thanks Calviղ the answers of jay and Aditya Khandelwal wasn't running but Vasiliy code was running fine.
20th Dec 2018, 3:47 AM
UwU Discover Me
+ 8
Mellifluous🛡️ , jay and Aditya Khandelwal codes are working well in your case, for only one class element. The only reason thare are not working on your phone, may be due to your phone browser not support ES6. In that case, my code also not working on your phone too, since it consists of arrow and for Each functions. I wonder how long it would take for es6 could fully support all phones wirhout compatibility issue. Lol.. Thank you Gordon , another great code to illustrate the solution. Your code is not using es6, I think would be no issue to run on @Mellifluous's phone.
20th Dec 2018, 6:26 AM
Calviղ
Calviղ - avatar
+ 7
Hey jay Aditya Khandelwal it's not working
20th Dec 2018, 3:42 AM
UwU Discover Me
+ 6
Thanks Vasiliy it's working 👍👍
20th Dec 2018, 3:40 AM
UwU Discover Me
+ 3
var arr = document. getElementsByClassName('trigger'); arr[0].onclick = function() { this.classList.toggle('clicked'); } Supplement for Calviղ: I decided it was easy to think of driving the array through the loop☺👇 https://code.sololearn.com/WcpqWngj9h4u/?ref=app
19th Dec 2018, 8:01 PM
Solo
Solo - avatar
+ 3
Mellifluous🛡️ you don't understand Calvin because you didn't debug that out because you test with one trigger only. Vasiliy only assigns to arr[0] the first element with class name. You will notice that the second to last are all not added event listener Should use for loop. If getElementsByClassName This is a slight modification on Calviղ 's code on how to do it using getElementsByClassName https://code.sololearn.com/WVcuIlL5uHBU/?ref=app Take note of what I highlight with console log: Note 1 : use length property for for loop Note 2 : notice the difference in datatype : nodelist vs htmlcollections
20th Dec 2018, 3:55 AM
Gordon
Gordon - avatar
21st Dec 2018, 1:01 PM
UwU Discover Me
+ 2
let btn = document.querySelector(".trigger") btn.addEventListener("click", () => { this.classList.toggle("clicked") })
19th Dec 2018, 10:39 PM
jay
+ 1
Hello
21st Dec 2018, 8:10 AM
Тимофей Кочергин
Тимофей Кочергин - avatar
+ 1
I created this free tool to help people as I ran into this in another project. I just wanted to share it. https://properprogramming.com/jquery-to-javascript-converter/
15th Jul 2020, 10:42 AM
Michael Parisi
Michael Parisi - avatar