CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
Varun Puravankara
Varun Puravankara

Reputation: 378

How to use jQuery toggle method dynamically?

In my project, there are so many jQuery toggles needed for changing text and icons. Now I’m doing that using:

$("#id1").click(function () {
  //Code to toggle display and change icon and text
});

$("#id2").click(function () {
  //Same Code to toggle display and change icon and text as above except change in id
});

The problem is that I got so many to toggle, the code is quite long but all I change for each one is the id. So I was wondering if there is any way to make this simple.

Below is a sample pic. I got so many more in single page.

Checkboxes

Upvotes: 0

Views: 552

Answers (4)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can try the below code.

var num = $("#myList").find("li").length;
  console.log(num)
for(i=0;i<num;i++){
$("#id"+ i).click(function(e){
  let target = e.target;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="myList">
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>

Upvotes: -1

fdomn-m
fdomn-m

Reputation: 28611

There are two issues here.

  1. How to run the same action on multiple elements
  2. How to know which element you've clicked so that you can run a relevant action on it. (most of the existing answers skip this part).

The first is to use a class for each of the elements you want to click, rather than wire up via an id. You can use a selector similar to [id^=id] but it's just cleaner to use a class.

<div id="id1" class="toggler">...

which allows you to:

$(".toggler").click(function() ...

the second is it associate the clickable with the item you want to toggle. There are many ways to do this, my preferred option is to associate them with data- attributes, eg:

<div class="togger" data-toggle="#toggle1">...

which allows you to:

$(".toggler").click(function() {
    $($(this).data("toggle")).toggle();
});

The key here is that this is the element being clicked, so you can do anything else with this such as show/hide an icon inside or change colour.

Example:

$(".toggler").click(function() {
  $($(this).data("toggle")).toggle();
  $(this).toggleClass("toggled");
});
.toggler { cursor: pointer }
.toggled { background-color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggler" data-toggle="#t1">T1</div>
<div class="toggler" data-toggle="#t2">T2</div>
<div class="toggler" data-toggle="#t3">T3</div>

<hr/>

<div id="t1" style='display:none;'>T1 content</div>
<div id="t2" style='display:none;'>T2 content</div>
<div id="t3" style='display:none;'>T3 content</div>

Upvotes: 1

Chivenh
Chivenh

Reputation: 114

Oh,Can you use a class instead of id?

<ul>
  <li class="idx">A</li>
  <li class="idx">B</li>
  <li class="idx">C</li>
</ul>

$(".idx").click(function(e){
   //Code to toggle display and change icon and text
  let target = e.target;
  //You can do all what you want just base on the `target`;
});

Upvotes: 1

Snel23
Snel23

Reputation: 1379

You can store the queries in an array, and iterate over them to perform the same JQuery operation on all of them

let ids = ["#id1", "#id2", "#id3", "#randomID"]

ids.forEach((id) => {
  console.log($(id).html())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
  <li id="randomID">D</li>
</ul>

Or (If like your example) and all of the id's are actually id1, id2, id3, ... etc.

let id = "id";
let n = 3; //amount of id's

for (let i = 1; i <= n; i++) {
  console.log($("#" + id + i).html())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>

Upvotes: 0

Related Questions