jQuery - how to create variable and click event with same class name but different number

Question

Is there a way to group several variables and click events into one function?

I'd like to only have one function that would call all the classes with the same name but different numbers (from 1 to 3 in this case) so I don't have to make multiple functions like this:

function step1() {
  $("#step-1").fadeIn();
}

function step2() {
  $("#step-2").fadeIn();
}

function step3() {
  $("#step-3").fadeIn();
}

And

$("#step-1-btn").click(function(){
  step1();
});

$("#step-2-btn").click(function(){
  step2();
});

$("#step-3-btn").click(function(){
  step3();
});

I'm sure there is an answer to this question already, but I can't phrase it good enough to find it...

Carsten Løvbo Andersen · Accepted Answer · 2022-05-25 08:56:36Z

It's not 100% clear to me what you want to achieve, but you can try something like this:

$("button[id^=step-]").click(function() {
  var id = $(this).attr("id").split('-')[1]
  step(id);
});

function step(num) {
  console.log("you called step with number:" + num)
}

The click event will work for any button where the id starts with step-. Then it will split the id and take the number from it and pass it to your function.

Demo (With fadein example)

$("button[id^=step-]").click(function() {
  var id = $(this).attr("id").split('-')[1]
  step(id);
});

function step(num) {
  console.log("you called step with number:" + num)
  $('div[id^=step-]').hide();
  $("#step-"+num).fadeIn();
}

#step-1,#step-2,#step-3 {
  height:200px;
  width:200px;
  display:none;
  background-color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="step-1-btn">step 1</button>

<button id="step-2-btn">step 2</button>

<button id="step-3-btn">step 3</button>


<div id="step-1">1</div>
<div id="step-2">2</div>
<div id="step-3">3</div>

Roko C. Buljan · Accepted Answer · 2022-05-25 15:35:34Z

1

Don't use sensitive integers stripped out of classNames, IDs etc. It's dirty coding and error prone.

Here's a far better suggestion, use the data attribute instead, where the selector to fadeIn is stored right inside such an i.e: data-show attribute:

$("[data-show]").on("click", function() {
  const selector = $(this).data("show");
  $(selector).fadeIn();
});

.step {
  display: none;
}

<button type="button" data-show="#step-1">1</button>
<button type="button" data-show="#step-2">2</button>
<button type="button" data-show="#step-3">3</button>

<div class="step" id="step-1">Step 1</div>
<div class="step" id="step-2">Step 2</div>
<div class="step" id="step-3">Step 3</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Docs:

answered May 25, 2022 at 15:35

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

DearBee Over a year ago

This is actually a lot better solution, thank you for suggesting it. Since I already accepted the answer I'd feel bad to take it back, but this is definitely much more cleaner.

Collectives™ on Stack Overflow

jQuery - how to create variable and click event with same class name but different number

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related