Jquery | Variable value working as a string instead of calling another variable

Question

The Html:

<div id="div1" name="divname">Something</div>
<div id="div2" name="divname">Something else</div>

<div id="output"></div>

The Jquery:

$('[name="divname"]').click( function (){ 

   var divnum = $(this).attr('id'); 
   var divout = 'out' + divnum;

   var outdiv1 = 'first div clicked';
   var outdiv2 = 'second div clicked';

   $('#output').html(divout);

});

Desired Result after div1 got clicked:

<div id="output">first div clicked</div>

Actual Result:

<div id="output">outdiv1</div>

Help Please.

Oriol · Accepted Answer · 2012-08-05 22:58:02Z

You should do it this way:

$('[name="divname"]').click( function (){ 

  var divnum = $(this).attr('id'); 
  var out={div1:'first div clicked',div2:'second div clicked'}
  $('#output').html(out[divnum]);

});

That's because if you say...

var divout = 'out' + divnum;

... divout is a string.

But you want to access the variable whose name is the string which divout contains. So the easiest way is creating an object, because you can access its properties like this:

obj.property
obj['property']

So

If you know the name of the property:

obj.property or obj['property']
If you don't know its name but you have a variable myvar which contains it:

obj[myvar] (myvar = 'property')

EDIT: Anyway, in that case I would use that:

$('[name="divname"]').click( function (){ 

  var divnum = $(this).attr('id'); 
  $('#output').html((divnum=='div1'?'first':'second')+' div clicked');

});

It checks if divnum is 'div1' and, if yes, the result is 'first div clicked'. If not, 'second div clicked'.

This way you don't need any objects, only a conditional.

Blender · Accepted Answer · 2012-08-05 22:33:28Z

0

You aren't going to get anywhere good naming variables like that. If your variables have very similar names (var1, var2, var3, ...), you should either be using an object or an array to store them.

In this case, try using objects to create a mapping between names and values:

var outdivs = {
  'div1': 'first div clicked',
  'div2': 'second div clicked'
};

$('[name="divname"]').click(function() {
   var divnum = $(this).attr('id');

   $('#output').text(outdivs[divnum]);
});

answered Aug 5, 2012 at 22:33

Blender

300k55 gold badges462 silver badges511 bronze badges

1 Comment

Oriol Over a year ago

If you use var divnum = 'out' + $(this).attr('id');, then divnum will be 'outdiv1' or 'outdiv2'. But outdivs['outdiv1'] and outdivs['outdiv2'] don't exist.

Collectives™ on Stack Overflow

Jquery | Variable value working as a string instead of calling another variable

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