habe probleme mit querySelector/All

basti1012 · 28. Juni 2018

Komme hier nicht weiter.

Code

element = document.querySelectorAll('li');
element.addEventListener("mouseover", myScript);
 function myScript(){
 
 g=this.getAttribute('data-wert');
   
   alert(g)
}

Mit Jqery bekomme ich es hin. Aber ich wollte es jetzt auch mit nativen Javascript versuchen weil muß es wieder auffrischen. Ich verstehe nur nicht wurum das nicht geht . Mache ich das All weg ,wird nur der erste <li> angezeigt . Mit all macht er gar nix mehr und sagt das getatribute('data wert) ein Fehler hat. Ohne all wahr kein Fehler da und es lief halt nur das erste li im navi.

Habe anstatt li auch mal klassen genommen ,das ging auch nicht .Was mache ich da falsch ?

Zweiter versuch wahr so so

Code

jj=document.querySelectorAll( 'li' );
 
jj.addEventListener( 'mouseover', (e) => {  
 
   alert('geht  nicht')
 });

Da ist es genau so. Wenn dann nur der erste ,oder gar keiner. Ich dachte immer das es damit geht und somit jquery ersetzten konnte .Irgendwas mache ich falsch nur was ?

Arne Drews · 28. Juni 2018

querySelectorAll() liefert ein Array und du willst jedem Element des Array das Event verpassen.

Dazu musst Du dann über die Elemente iterieren, bspw. mit forEach(). Und data-Attribute sprichst Du am besten über dataset an:

Code

var _li = document.querySelectorAll( 'li' );

_li.forEach( (i) => {

    i.addEventListener( 'mouseover', (e) => {

        alert( i.dataset.wert );

    });

});

Alles anzeigen

basti1012 · 28. Juni 2018

Oh man,da hatte ich ja mal wieder voll ein Brett vorm Kopf.Ich wahr ja schon bei for Schleifen aber so ist es besser.

Besten Dank

Arne Drews · 29. Juni 2018

jQuery bietet Dir den "Luxus", dass er erkennt, ob es ein Array oder ein einzelnes Element ist und je nachdem bspw. .bind() oder .click() darauf anwendet.

Bei einem Array wird dort auch intern gelooped.

Da muss man sich dran gewöhnen, aber dann ist es nativ nicht viel umständlicher.

basti1012 · 29. Juni 2018

Wir hatten ja das Thema schon paar mal das man den Anfängern nicht gleich Jquery aufdringen sollte und erstmal mit nataiven JS anfangen sollte.

Da ich für mich auch so ein paar dinge schreibe habe ich mir mal gedacht ich mache es ohne Jquery. So habe ich vor 15 Jahren auch mal angefangen. Muß dabei sagen das ich durch Jquery doch schreib Faul geworden bin. Klar verleichtert Jquery einige sachen ,aber wenn man erstmal wieder in nativen JS reingekommen ist kann man auch alles ohne Jquery Regeln.

Ist aber erschreckend wie schnell man einige Sachen vergisst wenn man nur noch Jquery nutzt. Mußte jetzt schon paar mal Goggeln weil ich einige sachen ohne Jquery gar nicht mehr auf der Kette hatte

Arne Drews · 29. Juni 2018

Man kann ja auch vieles mit relativ wenig Aufwand selber machen. Es ist natürlich nicht dazu gedacht, etwas wie jQuery selbst zu machen, aber wenn man bspw. bei einem Array automatisch loopen möchte, kann man sich das natürlich schnell basteln.

Beispiel:

Code

class ArrayExt extends Array {
  
  constructor( array ) { super( array ); }
  
  bind( event, method ) {  
      this.forEach( (i) => { i.addEventListener( event, method ); });
  }
  
}

erfüllt zum großen Teil schon das, was Du von jQuery gewohnt bist. In Deiner Anwendung reicht dann bspw. so etwas:

Code

var _buttons = ArrayExt.from( document.querySelectorAll('button') );

_buttons.bind( 'click', function(e) {
    e.preventDefault();
    alert( this.innerText );
  });

Zu beachten ist, dass M$ Array.from() erst ab Edge unterstützt, in IE müsste man dafür noch was eigenes entwickeln, aber das soll ja auch nur ein Beispiel sein.

Ist natürlich alles nur sinnvoll, wenn es häufiger Verwendung findet, ansonsten kann man auch einfach den Standard forEach() nehmen.

Achso, vergessen, bezogen auf dieses Konstrukt bspw.:

Code

<button>Eins</button>
<button>Zwei</button>
<button>Drei</button>

basti1012 · 29. Juni 2018

fällt dir hier für eine Lösung ein.

Code

var li = document.querySelectorAll( 'a:not('#hilfe')' );
li.forEach( (i) => {
    i.addEventListener( 'mouseover', (e) => {
// Mach was

})
})

es geht eigentlich nur um das not(). Wie du weißt kann man bei Jquery so was unterbinden,mir fällt da aber ohne Jquery gerade nix ein,außer für jedes "a" es einzelt zu machen

Arne Drews · 30. Juni 2018

Nö, ausser eine kleine Erweiterung, wie ich Dir in #6 mit bind() gezeigt habe.

Aber ob das den Aufwand wert ist, musst Du selbst entscheiden, ich weiß nicht, wie häufig das für Dich Anwendung findet.

In der Erweiterung kannst Du ja bspw. weitere Funktionen zusammen mit bind() und not() aufnehmen. Es ist nicht notwendig, für jede Erweiterung eine neue Klasse zu definieren.

Wenn Du also öfter solche Loops über Elemente machst, egal aus welchem Grund oder zu welchem Ziel, kann so eine kleine Erweiterung für übersichtlicheren und insgesamt kürzeren Code sorgen.

Arne Drews · 30. Juni 2018

Wobei ich mir grad nicht sicher war und das mal getestet habe. not() wird auch nativ unterstützt.

Deine Selektion müsste so aussehen, dann funktioniert das:

Code

document.querySelectorAll( 'a:not(#hilfe)' );

Also einfach die SingleQuotes im not() weglassen.

habe probleme mit querySelector/All

Jetzt mitmachen!

Teilen