JQuery : Assigning multiple id's to do the same function.

Question

A rather simple question that I feel has a simple solution to, but can't seem to think of the right way of going about solving.

I have a set of buttons laid out in a 3 x 3 format, that I want to change attributes of when clicked, but independently. I gave them all the same class, but differentiated them using id's.

Is there a way to write, in one line for a group of ID's to do the same thing? Or do I have to redundantly write out each button's call.

I guess to put it simply, can I write

 $('.ready').click(function(){
   if('.ready'.is('#7') || '.ready'.is('#8') || '.ready'.is('#9')){
      execute code.
   }
 });

Any help would be greatly appreciated!

You can give elements more than one class too.

Pointy
– Pointy

2015-11-13 19:30:22 +00:00
Commented Nov 13, 2015 at 19:30 — Pointy
– Pointy, Commented Nov 13, 2015 at 19:30
Use $(this) inside the function. It should work.

Rana_S
– Rana_S

2015-11-13 19:30:52 +00:00
Commented Nov 13, 2015 at 19:30 — Rana_S
– Rana_S, Commented Nov 13, 2015 at 19:30
if ($(this).is("#7, #8, #9"))

Pointy
– Pointy

2015-11-13 19:30:55 +00:00
Commented Nov 13, 2015 at 19:30 — Pointy
– Pointy, Commented Nov 13, 2015 at 19:30

DinoMyte · Accepted Answer · 2015-11-13 19:42:19Z

1

You don't need the class .ready selector since ids are unique enough to target as selectors.

 $('#7,#8,#9').click(function()
{
    // do stuff
});

answered Nov 13, 2015 at 19:42

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Alexander Kamenkovich Over a year ago

Oh, I didn't think it was that simple! I can just do that + $(this) to get the effect I needed for each button. Thanks!

void · Accepted Answer · 2015-11-13 19:31:45Z

1

You can simply do

var pair1 = "#7, #8, #9";
var pair2 = "#2, #3, #4";
$('.ready').click(function(){

   if($(this).is(pair1)){
      execute code.
   }

   else if($(this).is(pair2)){
      execute some other code.
   }

});

answered Nov 13, 2015 at 19:31

void

36.8k10 gold badges72 silver badges111 bronze badges

1 Comment

Peter Alexander Kamenkovich Over a year ago

Tried this block of code out as well! Works like a charm! Thank you :)

Andrew Mairose · Accepted Answer · 2015-11-13 19:44:39Z

1

Use the .attr() function to get the id attribute.

$('.ready').click(function() {
    var id = $(this).attr('id');
    if (id === '7' || id === '8' || id ==='9') {
        //execute code
    }
});

Since your id's are numbers, you could also just use comparison operators. See the working example below, which will tell you which row you clicked based on the id.

$(document).ready(function() {
  $('.ready').click(function() {
    var id = $(this).attr('id');
    if (id < 4) {
      $('#out').html('First row clicked');
    } else if (id < 7) {
      $('#out').html('Middle row clicked');
    } else {
      $('#out').html('Last row clicked');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="ready">1</button>
<button id="2" class="ready">2</button>
<button id="3" class="ready">3</button>
<br>
<button id="4" class="ready">4</button>
<button id="5" class="ready">5</button>
<button id="6" class="ready">6</button>
<br>
<button id="7" class="ready">7</button>
<button id="8" class="ready">8</button>
<button id="9" class="ready">9</button>

<span id="out"></span>

edited Nov 13, 2015 at 19:44

answered Nov 13, 2015 at 19:31

Andrew Mairose

11.1k15 gold badges62 silver badges108 bronze badges

1 Comment

Peter Alexander Kamenkovich Over a year ago

Works pretty well! Thank you!

Collectives™ on Stack Overflow

JQuery : Assigning multiple id's to do the same function.

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related