$ (". Navbar.navbar-inverse"). Click() funktioniert aber $ (". Navbar .navbar-inverse"). Click() nicht?

Question

Ich lerne immer noch die Seile des Webdesigns, und ich habe Probleme zu verstehen, wie ein paar Dinge funktionieren ...

Ich habe eine Funktion zum Umschalten der Navigationsleiste Headerfarbe, und ich finde die folgendes wahr, aber nicht sicher, warum:

Works:

$(".navbar.navbar-inverse".click(function() { 
    $(this).toggleClass("highlight"); 
}); 

nicht funktioniert (Raum btw navbar und navbar-invers):

$(".navbar .navbar-inverse".click(function() { 
     $(this).toggleClass("highlight"); 
    }); 

Und falls ich diese Funktion auf das navbar-Toggle gelten, gilt das Gegenteil:

Works (Raum btw navbar und navbar-Toggle):

$(".navbar .navbar-toggle").click(function() { 
       $(".navbar-inverse").toggleClass("highlight"); 
      }); 

funktioniert nicht:

$(".navbar.navbar-toggle").click(function() { 
        $(".navbar-inverse").toggleClass("highlight"); 
       }); 

Bonus ...

Kann nicht navbar-Toggle-Hintergrund mit diesem Ansatz ändern:

funktioniert nicht:

$(".navbar .navbar-toggle").click(function() { 
       $(this).toggleClass("highlight"); 
      }); 

Answer 1

Die erste bezieht sich ein Element mit Klassen navbar und navbar-toggle, der zweite bezieht sich .navbar-toggle die ein Nachkomme von .navbar ist. Das setzt einen Platz frei :)

Answer 2

Wie in this answer zu sehen, können Sie Elemente (z. B. namens "navbar") auswählen, die eine bestimmte Klasse ("navbar-inverse") mit "navbar.navbar-inverse" enthalten. Wenn Sie ein Leerzeichen zwischen den beiden addieren, im Grunde bedeutet es

alle Elemente auswählen, die die Klasse navbar-inverse und sind Kinder der navbar

Beifall