Można bez Jquery

pytanie zadane 21 września 2019 w JavaScript przez Majonez.exe Gaduła (3,490 p.)

Wiecie może jak zrobić ten kod bez Jquery?

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav-close-icon');
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});

? (Proszę o jakiś przykładowy kod i wytłumaczenie).

Jakby komuś było by to potrzebne ten kod odpowiada za menu na stronie https://aurolia-css.github.io.

2 odpowiedzi

odpowiedź 21 września 2019 przez 42savage Bywalec (2,630 p.)
wybrane 23 września 2019 przez Majonez.exe

Najlepsza

https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

Tutaj masz wszystko pokazane

komentarz 22 września 2019 przez Majonez.exe Gaduła (3,490 p.)

Tylko jednego nie rozumiem tam nie do końca jasno jest (po mojemu) wytłumaczone .on().

Co w tym kodzie można poprawić? (Tam to .on() jest do poprawy ale czy początek chociaż dobry).

var menuIconEl document.querySelector(".menu-icon");
var sidenavEl document.querySelector(".sidenav");
var sidenavCloseEl document.querySelector(".sidenav-close-icon");



function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});

komentarz 22 września 2019 przez 42savage Bywalec (2,630 p.)

var menuIconEl document.querySelector(".menu-icon");
var sidenavEl document.querySelector(".sidenav");
var sidenavCloseEl document.querySelector(".sidenav-close-icon");

brakuje znaku równości

var menuIconEl = document.querySelector(".menu-icon");
var sidenavEl = document.querySelector(".sidenav");
var sidenavCloseEl = document.querySelector(".sidenav-close-icon");

A co do tego

menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});

to jquerowe menuIconEl.on to samo co co javascritpowe

menuIconEl.addEventListener('click', function() {

  var sideNavEl = document.querySelector('.sidenavEl');
  sideNavEl.classList.toggle(active)

});

komentarz 23 września 2019 przez Majonez.exe Gaduła (3,490 p.)

var menuIconEl = document.querySelector(".menu-icon");
var sidenavEl = document.querySelector(".sidenav");
var sidenavCloseEl = document.querySelector(".sidenav-close-icon");
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
menuIconEl.addEventListener('click', function() {
var sideNavEl = document.querySelector('.sidenavEl');
sideNavEl.classList.toggle(active)
});
sidenavCloseEl.addEventListener('click', function() {
var sideNavEl = document.querySelector('.sidenavEl');
sideNavEl.classList.toggle(active)
});

Nie wiem co nie działa :(

komentarz 23 września 2019 przez 42savage Bywalec (2,630 p.)

if (el.hasClass(className))

Przypuszczam ,że to, bo to jquerowa funkcja

powinieneś napisać tak:

if(el.classList.contains(className){
    // do something
}

i zamisat

el.addClass

powinno być

el.classList.add('nazwaKlasy')

komentarz 23 września 2019 przez Majonez.exe Gaduła (3,490 p.)

const menuIconEl = document.querySelector('.menu-icon');
const sidenavEl = document.querySelector('.sidenav');
const sidenavCloseEl = document.querySelector('.sidenav-close-icon');
const onclick = e => sidenavEl.classList.toggle( 'active' );
menuIconEl.addEventListener( 'click', onclick );
sidenavCloseEl.addEventListener( 'click', onclick );

Sam się pobawiłem i jest dla potomności działa.

odpowiedź 21 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

document.querySelector
element.classList.toggle - wraz z opcjonalnym drugim parametrem dla condition
addEventListener dla obsługi eventu click

Poczytaj w dokumentacji np. MDN o tych trzech elementach i powinieneś sobie poradzić z przerobieniem tego na pure JS.

komentarz 21 września 2019 przez Majonez.exe Gaduła (3,490 p.)

const = document.querySelector('.menu-icon');
const = document.querySelector('.sidenav');
const sidenavCloseEl = document.querySelector('.sidenav-close-icon');
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});

Coś takiego wykleciłem (nie działa) nie wiem dla czego (może początek)

komentarz 21 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

const co? gdzie nazwa stalej? No i nie wykorzystałeś tych 3 rzeczy, które wymienilem. Poczytaj sobie na spokojnie docs, tam masz wszystko bardzo ladnie rozpisane.