Use of the Ternary Operator in Conditional Rendering.

How to use conditional operator in jQuery a template?

Last Updated : 23 Apr, 2021

In this article, we will learn to use ternary or conditional operator in jQuery.

The Ternary or Conditional operator takes three operands, a condition followed by question mark followed by two expressions to execute with a semicolon (:) in between the two expressions.

Syntax:

condition ? expression1 : expression2

Example: Now let us try an example to find how a conditional operator is used in the jQuery template.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
 
<body style="text-align:center;">
   <h2 style="color:green">GeeksforGeeks</h2>
   <div style="background-color:red">
        
<p>Click the button to change the background color .</p>
 
       <button>Click me!</button>
   </div>
 
  <script>
    function toggleColor(){
      tag = $('div');
      // Ternary Operator (add/remove background color)
      // If tag color is green convert it to red otherwise convert to green.
     tag.css('background') == 'green' ? tag.css({'background':'red'}) : tag.css({'background':'green'}); 
   }
 
    $('button').on('click', function(){
      toggleColor();
    });
    </script>
</body>
</html>

Output:

ternary operator

Use of the Ternary Operator in Conditional Rendering.

F

faizamu19

Improve

Article Tags :

Similar Reads

How to use *= operator in jQuery attribute selector ?

This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it. Syntax: $("div[myAttr*='GFG']").jQueryMethod({ // Code }) Approach: We will create HTML div elements with some attributes.

How to use OR Operation in jQuery Attribute Selectors ?

In this article, we will see how to use OR operation in jQuery Attribute Selectors. To use the OR operation in the attribute selector, we will use the comma operator (,) on attributes or attribute values. Syntax: $(".class1, .class2, ...") { // Code } Approach: First we will create some HTML div ele

How to use conditional statements with EJS Template Engine ?

Conditional statements in EJS templates allow you to dynamically control the content that is rendered based on specified conditions. Similar to JavaScript, EJS provides a syntax for using conditional logic within your HTML templates. In this article, we will see a practical example of using conditio

Use of the Ternary Operator in Conditional Rendering.

In React, conditional rendering helps show different things based on certain conditions. The ternary operator is a concise way to do this quickly and clearly. In this article, we will learn step by step process to use the ternary operator for conditional rendering in React. Syntax: React developers

How to use template string literal in ECMAScript 6 ?

Template literals are a new feature that was introduced in ECMAScript6, which offers a simple method for performing string interpolation and multiline string creation. The use of the string literal enables the creation of multiline strings free of backslashes, the addition of any word or phrase to t

How to get a dialog box if there is no internet connection using jQuery ?

In this article, we will see how to check the internet connection using jQuery. We will be using navigator.onLine which will return true if an internet connection is available otherwise it will return false. Syntax: navigator.onLine Returns: True: If the internet connection is available.False: If th

How to check a selector matches some content using jQuery?

In order to know whether the jQuery selector selected any element or not, Here 2 methods are discussed and these are mostly used methods. Example-1: In this example, Selector searches for <p> element. This example uses the length property to check If something is selected or not. In this case

Conditional Statements in JavaScript

JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If the condition is met, a particular block of code will run; otherwise, another block of code will execute based on the condition. 1. Using if StatementThe if statement is used to evaluate a particul

How to conditionally add a member to an object using JavaScript?

Objects are the most important data types and are building blocks for modern JavaScript. They are different from primitive data-types such as String, Number, Boolean, null, etc. But we can make these datatypes as objects by using the new keyword. Below are the approaches to conditionally adding a me

How to Create a Toggle to Show/Hide Divs in jQuery ?

A toggle button acts like a switch to hide and show the HTML elements. If a toggle button is ON, it will show the div element. Otherwise, it will hide the element just like a switch, if it gets ON the supply will start, otherwise, it stops the supply. We can use the below approaches to create a togg