Jquery :not() oder andere Lösung

  • Ich versuche gerade mit not() zu arbeiten ,aber irgendwie will das nicht .

    zb

    Code
    1. <div class="haupt">
    2. <div class="a1"></div>
    3. <div class="a2"></div>
    4. <div class="a3"></div>
    5. </div>

    Jetzt möchte ich wenn ich auf haupt klicke ein alert kommt

    Code
    1. $('#haupt').click(function(){
    2. alert('geht');
    3. });

    Möchte aber das beim klick auf a2 kein alert erscheint , habe es so versucht

    Code
    1. $('#haupt').not('.a2')click(function(){
    2. alert('geht nicht');
    3. });

    könnte ja .a2 auf pointer-event:none setzten aber das geht hier leider nicht weil die Felder für andere Functionen noch klickbar sein sollen.

    Einer nee idee wie das richtig geht oder eine andere Lösung

  • Dein Klick Event liegt auf dem übergeordneten DIV, .a2 ist ein child. Weiterhin stammt Dein übergeordnetes DIV von einer Klasse haupt ab, nicht von der ID, wie Du es im jQuery hast.


    ungetestet, nach obigem HTML:

    Code
    1. $('.haupt > div').not( '.a2' ).click(function() { alert('...'); });
  • Oh das mit der Id hatte ich jetzt hier falsch eingegeben das wahr mein Fehler. Aber wo ich jetzt deins sehe ,sehe ich was ich falsch gemacht habe ich habe es genau andersrum versucht zb so

    Code
    1. $('.haupt').not( 'div > .a2' ).click(function() { alert('...'); });

    Hatte auch noch andere versuche mit this,aber nix klappte weil ich es immer andersrum gemacht habe.

    Aber gut so klappt es jetzt .

    Danke dir

  • Als Hinweis gedacht:

    Das Einbinden von Bibliotheken ( bspw. jQuery ) wird ja auch in Bezug auf die DSGVO diskutiert, wenn ich das richtig in Erinnerung habe.

    Ich neige dazu, alles in nativem JS zu machen, was in den meisten Fällen auch nicht viel mehr Aufwand ist.


    Dein Beispiel würde in nativem JS so aussehen:

    Code
    1. document.querySelectorAll( 'div.haupt > div' ).forEach((i) => {
    2. if ( !i.classList.contains('a2') )
    3. i.addEventListener( 'click', (e) => { alert('something'); } );
    4. });