了解Javascript三元语句代码段

Question

I came across below code snippet and trying to understand it. I understand that we are using ternary operator and adding active class on menuclick but a detailed explanation will be appreciated.

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

Thank you

Answer 1

!_this.menuClicked

I am assuming menuClicked is a boolean representation of if a menu has been clicked or not. So what this does is say if a menu has been clicked return false. Because the ! is a negation operator

So if !_this.menuClicked == true then do this

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

The first or checks if the lastMenuItems id equals the active menu items last child that doeesnt have the ignore else class on it.

if that is true we go to the nested turnary

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

Which checks if the last-menuitem class has elements in it, then it makes the element with .arrow class have the yellow css styling.

If the first part of the nested turnery is false then we hit the second part

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

which is if the lastmenuItem with the view-holder class's id equals the active menu items last chiled that doeesnt have the ignore else class on it.

the do the previous mentioned true part. If not do the third part of the nested turnery

($(window).scrollTop() + $(window).height() >= $(document).height() - 20)) if the scroll position + the height of the window is greater then the document height - 20 return true. and do the true part of the nested turnery. else if all return false do the false part

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

If everything is false remove yellow from the element with the .arrow class. below is the turnery broken out to be readable

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