JQuery .click pass variables

Question

propb. very simple, but not for me. Looking to pass a variable on a click function to show either div a or div b based on the a link clicked. My code is something like this

$('.view').click(function() {
    var id = this.id.replace('view_', "");
if(id=1) { $('#show').show('slow'); }
if(id=2 ) { $('#show2').show('slow'); }
$('#categories').hide('slow');
    return false;
  });
  });

But OBVIOUSLY the if statements are wrong - I know that I am just using them as an example. Any suggerstions? Thanks in adavance

It looks like you found @naeem's answer helpful. Don't forget to mark it as accepted if that is the case. I see you are new here, so I wanted to make sure you knew how important it is to accept answers on every question you ask if possible. And welcome to Stack Overflow! — Doug Neiner
– Doug Neiner, Commented Jan 15, 2010 at 8:36

Doug Neiner · Accepted Answer · 2010-01-15 08:25:28Z

6

You are assigning the value of 1 to id instead of testing for a match:

if(id = 1) {} // WRONG: this means if id is successfully SET to 1

Here is what it should look like:

$('.view').click(function() {
    var id = this.id.replace('view_', "");

    if(id == 1)       { $('#show').show('slow'); }
    else if(id == 2 ) { $('#show2').show('slow'); }

    $('#categories').hide('slow');

    return false;
});

If you find yourself making this mistake a lot, you should switch the test around:

if( 1 == id) {} // Works
if( 1 = id ) {} // Throws JS error instead of failing silently

answered Jan 15, 2010 at 8:25

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

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

2 Comments

jrharshath Over a year ago

+1 this post finally reveals why people write (1==id) instead of the other way round

Sara44 Over a year ago

Well explained, +1 for that

Naeem Sarfraz · Accepted Answer · 2010-01-15 08:28:31Z

4

try this...

var id = parseInt(this.id.replace('view_', ""), 10);
if(id === 1) { 
 $('#show').show('slow'); 
} else if(id === 2 ) { 
 $('#show2').show('slow'); 
}

1 '=' is used for assignment
2 '==' is comparison with type conversion
3 '===' is comparison without type conversion

answered Jan 15, 2010 at 8:28

Naeem Sarfraz

7,4305 gold badges39 silver badges63 bronze badges

1 Comment

russell Over a year ago

Perfect Naeem, thanks, works stright out of box. I am just learning JQuery/java so some of the lang is a bit strange for me as a PHP guy Thanks again

David Hedlund · Accepted Answer · 2010-01-15 08:29:02Z

0

If your link id's are view_1 and view_2, then all should be fine here, except for the fact that you're using = rather than comparison ==.

If your show elements were called show1 and show2, rather than show and show2, you could of course do:

$('.view').click(function() {
    $('#show' + this.id.replace('view_','')).show('slow');
    $('#categories').hide('slow');
    return false;
});

answered Jan 15, 2010 at 8:29

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

Juraj Blahunka · Accepted Answer · 2010-01-15 08:31:44Z

0

As Doug pointed out, the problem is in conditional assignment

You should also consider renaming your ids to directly match your view ids, so you can do it without test cases, only by string concatenation:'

$('.view').click(function() {
    var id = this.id.replace('view_', "");

    $('#show' + id).show('slow'); // doesn't have to use if statements

    $('#categories').hide('slow');

    return false;
});

answered Jan 15, 2010 at 8:31

Juraj Blahunka

18.6k6 gold badges38 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQuery .click pass variables

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related