Assign variable value as variable name

Question

the problem is i want to shorten my code by calling a variable using other variable's value

long working version:

var russia = new Array('15')
var switzerland = new Array('5')

$('.country').mouseover(function(){
    switch(this.id){
        case 'russia':
            active_country_lift(this.id,russia[0])
        break
        case 'switzerland':
            active_country_lift(this.id,switzerland[0])
        break           
    }
})

it will get the id of mouseovered then check if it matched one of the variable by using switch

what i want to obtain is something like this:

var russia = new Array('15')
var switzerland = new Array('5')

$('.country').mouseover(function(){
    active_country_lift(this.id,this.id[0])     
})

of course the above code wouldn't work but is there a workaround for this?

UPDATE: Arun's answer worked and ill accept it soon and as for the comments requesting for the full code, here's a chunk of it after i applied Arun's

var countries = {
    russia: ['-15px'],
    switzerland: ['-5px']
}

$('.country_inactive').mouseover(function(){
    active_country_lift(this.id, countries[this.id][0])
})

function active_country_lift(country, country_top){
    if(!$('#'+country+'_active').hasClass('active')){
        $('#'+country+'_active').stop().fadeIn(100).animate({
            'top' : country_top
        }, 200)
        $('#'+country).stop().fadeOut(100)
    }
}

it will be used for a world map, feel free to make any suggestions for making it more dynamic

Pro tip: never use `new Array` in JS unless you are declaring the length of the array. Just initialize the array using `[]`. — Matthew Herbst, Apr 22 '16 at 03:36
Can you add complete code of what you're trying to achieve, this can probably achieved using CSS only. — Tushar, Apr 22 '16 at 03:40
Possible duplicate of [Get global variable dynamically by name string in JavaScript](http://stackoverflow.com/questions/1920867/get-global-variable-dynamically-by-name-string-in-javascript) — 4castle, Apr 22 '16 at 03:59

Arun P Johny · Accepted Answer · 2016-04-22T03:38:43.167

4

You can store the country info in an object like a key value pair, then use bracket notation to access it dynamically

var countries = {
  russia: new Array('-15px'),
  switzerland: new Array('-5px')
}

$('.country').mouseover(function() {
  active_country_lift(this.id, countries[this.id][0])
})

If you don't have multiple values then

var countries = {
  russia: '-15px',
  switzerland: '-5px'
}

$('.country').mouseover(function() {
  active_country_lift(this.id, countries[this.id])
})

edited Apr 22 '16 at 03:38

answered Apr 22 '16 at 03:35

Arun P Johny

384,651
66
527
531

`new Array('-15px')` ==> `'-15px'`. Why use array. – Tushar Apr 22 '16 at 03:36
@Tushar it actually gives `['-15px']` – Matthew Herbst Apr 22 '16 at 03:37
@Tushar there could be multiple values, not sure about that – Arun P Johny Apr 22 '16 at 03:37
If `russia` and `switzerland` are globals, you could even just do `window[this.id]` instead of creating a wrapping object, but creating a wrapping object is better because global variables are bad practice. – 4castle Apr 22 '16 at 03:41
1

@4castle yes, you can. But using object is better practice instead of globals – Tushar Apr 22 '16 at 03:41
At least change `new Array('-15px')` ==> `['-15px']` Using `new Array` isn't recommended. – 4castle Apr 22 '16 at 03:49

Developer107 · Answer 2 · 2016-04-22T03:46:19.663

0

try using eval() function

var russia = new Array('-15px')
var switzerland = new Array('-5px')

$('.country').mouseover(function(){
   active_country_lift(this.id,eval(this.id)[0])     
})

edited Apr 22 '16 at 03:46

answered Apr 22 '16 at 03:37

Developer107

1,728
2
14
24

1

Most people pronounce `eval` as `evil` because it is evil and inefficient. This is a valid answer though. – 4castle Apr 22 '16 at 03:53

Assign variable value as variable name

2 Answers2