2016-07-27 4 views
-1

Ich stieß auf Code-Schnipsel und versuchen, es zu verstehen. Ich verstehe, dass wir Ternäroperator verwenden und aktive Klasse auf Menüklick hinzufügen, aber eine detaillierte Erklärung wird geschätzt.Verständnis Javascript ternäre Anweisung Code-Snippet

navClick: function (o) { 
var _this = this //what does this refer to 

//what does this line of code do especially the equal sign 
!_this.menuclicked ?(($(".last-menuitem").attr("id")==$("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 
|| $(".last-menuitem").find(".view-holder").attr("id")==$("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 
|| ($(window).scrollTop() + $(window).height() >= $(document).height() - 20))?($(".last-menuitem").length!=0 && $(".arrow").addClass('yellow')) 
:($(".arrow").removeClass('yellow'))): 
} 

Danke

+1

Was genau verstehst du nicht? – nicael

+0

Ich möchte verstehen, wenn wir eine aktive Klasse hinzufügen, indem wir die folgende Anweisung verwenden (($ (". Last-menueitem"). Attr ("id") == $ ("# menu li.active"), was dann "finden "tut genau hier" .find ("a: last-child"). nicht (". ignore-ele"). attr ("klasse") " – almondn

Antwort

0

!_this.menuClicked

ich menuClicked gehe davon ist eine Boolesche Darstellung, wenn ein Menü angeklickt wurde oder nicht. Also, was das bedeutet, sagen wir, wenn ein Menü angeklickt wurde, geben Sie false zurück. Da die ! ein Negationsoperator ist

Also, wenn !_this.menuClicked == true dann tun dies

(($(".last-menuitem").attr("id") == $("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 
|| 
$(".last-menuitem").find(".view-holder").attr("id") == $("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 
|| 
($(window).scrollTop() + $(window).height() >= $(document).height() - 20)) 

(".last-menuitem").attr("id") == $("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 

Die erste oder prüft, ob die lastMenuItems id die aktiven Menüpunkte letzte Kind ist gleich, die haben doeesnt das ignorieren andere Klasse darauf.

wenn das wahr ist, gehen wir in die verschachtelte turnary

($(".last-menuitem").length!=0 && $(".arrow").addClass('yellow')) 

der prüft, ob die zuletzt menuitem Klasse Elemente in sich hat, dann ist es das Element mit .arrow Klasse macht den gelben CSS Styling haben.

Wenn der erste Teil des verschachtelten turnery falsch ist, dann schlagen wir den zweiten Teil

$(".last-menuitem").find(".view-holder").attr("id") == $("#menu li.active").find("a:last-child").not(".ignore-ele").attr("class") 

, die mit dem Blick Halter Klasse ID entspricht die aktiven Menüpunkte zuletzt, dass doeesnt haben chiled wenn die lastmenuItem ist die Ignoriere andere Klassen darauf.

das tun die vorher erwähnte wahre Teil. Wenn nicht der dritte Teil der verschachtelten Dreherei

($(window).scrollTop() + $(window).height() >= $(document).height() - 20)) Wenn die Scroll-Position + die Höhe des Fensters größer ist dann die Dokumenthöhe - 20 zurück wahr. und mache den wahren Teil der verschachtelten Dreherei. wenn alle Stricke false zurück tun die falschen Teil

($(".arrow").removeClass('yellow'))): 

Wenn alles falsch entfernen gelb von dem Element mit der .arrow Klasse. unten ist die Drechslerei gebrochen zu lesen

!_this.menuclicked ? 
(
    (
     $(".last-menuitem").attr("id") == $("#menu li.active").find("a:last-  
     child").not(".ignore-ele").attr("class") 
     || $(".last-menuitem").find(".view-holder").attr("id") == $("#menu 
      li.active").find("a:last-child").not(".ignore-ele").attr("class") 
     || ($(window).scrollTop() + $(window).height() >= $(document).height() 
      - 20) 
    ) 
? ($(".last-menuitem").length!=0 && $(".arrow").addClass('yellow')) 
: ($(".arrow").removeClass('yellow')) 
):