了解Javascript三元語句代碼段

Question

我遇到了下面的代碼片段，並試圖理解它。 我了解我們正在使用三元運算符，並在menuclick上添加了活動類，但將不勝枚舉。

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'))):
}

謝謝

Answer 1

!_this.menuClicked

我假設menuClicked是菜單是否被單擊的布爾表示。 因此，這就是說如果單擊了菜單，則返回false。 因為! 是一個否定運算符

因此，如果!_this.menuClicked == true則執行此操作

(($(".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") 

第一個或檢查lastMenuItems id是否等於活動菜單項的最后一個子級，該子級上不包含ignore else類。

如果是這樣，我們轉到嵌套的轉台

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

它檢查last-menuitem類中是否包含元素，然后使帶有.arrow類的元素具有黃色的CSS樣式。

如果嵌套車床的第一部分是假的，那么我們打第二部分

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

這就是說，具有視圖持有者類ID的lastmenuItem等於最后編譯的活動菜單項，該菜單項上不包含ignore else類。

做前面提到的真實部分。 如果不做，則進行嵌套車床的第三部分

($(window).scrollTop() + $(window).height() >= $(document).height() - 20))如果滾動位置+窗口高度大於文檔高度-20返回true。 並完成嵌套車床的真實部分。 否則，如果全部返回假，則做假部分

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

如果一切都不正確，則從帶有.arrow類的元素中刪除黃色。 下面是車削技術，以方便閱讀

!_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'))
):