Exploring the concept behind the Javascript ternary statement code snippet

Recently, I stumbled upon this code snippet and I'm trying to grasp its purpose. I do understand that it involves using a ternary operator to add an active class on menu click, but a more detailed explanation would be greatly appreciated.

navClick: function (o) { 
var _this = this //I am curious about what 'this' is referring to

//The following line of code is a bit confusing to me, 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 in advance for any clarification.

Answer №1

!_this.menuClicked

To clarify, the variable menuClicked is a boolean indicator of whether a menu has been clicked. Therefore, when it is stated as !_this.menuClicked == true, it means that if a menu has not been clicked, then execute the following:

(($(".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 initial check ensures that the id of lastMenuItem matches the class of the last child in the active menu, excluding those with the ignore class.

If this condition holds true, we proceed to the nested ternary operation:

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

This part verifies if the class last-menuitem contains elements, then adds a yellow styling to elements with the arrow class.

If the first condition of the nested ternary is false, we move to the second part:

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

Here, it checks if the id of lastMenuItem with the view-holder class matches the class of the last child in the active menu, excluding those with ignore class.

If neither of the previous conditions is met, the third part of the nested ternary is executed:

($(window).scrollTop() + $(window).height() >= $(document).height() - 20))

When the sum of the scroll position and window height surpasses the document height minus 20, it returns true and performs the corresponding action. If none of the conditions are true, the false part is executed:

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

In case all conditions are false, the yellow styling is removed from elements with the arrow class. The ternary operation has been broken down below for better understanding:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to incorporate a JavaScript file from another JavaScript file in HTML, even if it's just one line below?

It seems that the issue of using a function or a variable from file1 in file2 is not working as expected: <head> <script src="file1.js"></script> <script src="file2.js"></script> </head> Since file2 ...

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...

Issue encountered during the creation of a Nuxt3 project. The download of the template from the registry was

Trying to create a new Nuxt 3 project using the command below: npx nuxi init nuxt-app The following error message is displayed: ERROR (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time ...

Automatically update the div every few seconds and pause when it has loaded successfully

I am facing a challenge in creating a div that refreshes automatically every 10 seconds, but stops when it successfully loads. Here is the jQuery script I have developed: <script type="text/javascript"> $(document).ready(function(){ var j = jQuer ...

Troubles arising from Maya 2017 export to ThreeJS

I'm facing an issue with exporting from Maya to Three.js Using Maya 2017 on a Mac and recently downloaded ThreeJS from the site. Initially, I had no problems with the .min version (seems to be Revision 57). I was utilizing mesh = new THREE.Mesh(geom ...

Activate event starting from parent and ascending through child nodes

When I have a table inside a <div class="timely"></div>, and within that table is a <th class="prev"><i>previous</i></th>, Chrome developer tools show an event listener on the <th>. However, Firefox developer tools ...

Step-by-step guide on permanently assigning a value in Node.js

I recently started working with node js and I am facing an issue where I need to save an id in a global variable that is required in multiple functions. However, every time the server restarts, the variable gets emptied. Is there a way to persist this va ...

Create an array of arrays within a loop using TypeScript

My application contains an object with dates and corresponding time arrays. The console log output is displayed below: 32: { 1514160000: Array [ 1200, 1500 ], 1514764800: Array [ 1200, 1500 ], 1515369600: Array [ 1200, 1500 ], 1515974400: Array [ 700, 12 ...

Modifying HTML content through JSP file

I'm facing a challenge with implementing a specific functionality. My goal is to display the contents of a svn repository in a TreeView. I have a Java Class that connects to the repository and stores the contents in my Java DataModel. In my .jsp file ...

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

Using Javascript with Selenium to choose an item from a dropdown menu

I'm having trouble selecting an element from a dropdown list and interacting with it. The xpath for the element I'm trying to select from the dropdown is: /html/body/div[1]/div/div[1]/div[1]/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[2] ...

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

Unable to access current props within useEffect block

When I use useEffect with the parameter props.quizStep, my function fn (which is a keydown event listener) is unable to access the current value of props.quizStep. I'm puzzled as to why it's not working properly. Can you help me understand? Bel ...

Rearrange the entire div container by simply dragging and dropping it. (Shift the Pop-up Modal dialog box)

How can I make a Modal pop-up draggable and change the color of the "Ok" and "Cancel" buttons on hover using a single CSS class? .hidModal{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; ...

Unraveling JSON data within an AngularJS controller

I'm facing an issue with exposing a field in my AngularJS controller. The problem arises when a JSON 'owner' object is returned by a webservice, containing a field named 'Cave'. If this 'Cave' field has a null, empty, or ...

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

Learn how to dynamically toggle the visibility of tabs in CodeMirror with a simple button click

Currently, I am developing a Python editor for a website using the Code Mirror JavaScript library. There is a button called toggle invisibles that, when clicked, displays spaces and end-of-line markers. I also wanted to show tabs, which are not supported b ...

What is the best way to trigger two functions simultaneously using an onClick event in NextJS?

I have defined two constants in my NextJs app, "toggleMenu" and "changeLanguage". When the language changer inside the menu is clicked, I want it to trigger both of these functions. However, I tried implementing this code but it doesn't seem to work ...

Coloring weeks in fullcalendar's two-shift calendar

Can FullCalendar create a calendar with alternating colors for odd and even weeks? Visit the FullCalendar demos here For example, see image below: https://i.sstatic.net/D5qza.png ...

The issue with text color not displaying properly within a Material-UI Theme

While designing a color theme using Material-UI, I specified the contrast text as white (#fff). Surprisingly, it seems to work for buttons with the primary color but not for those with the secondary color. I attempted overrides following the suggestions p ...