How to change variable content getting the variable name from a data-attribute in a loop?

Question

I have a loop that checks the content of an element's data-attribute and then uses this content to match it in a switch function. I want to simplify this code because the data-attribute value may vary in the next future and every time I have to add a case to the switch. What I have now (this works fine):

var a = $('#el').attr('data-x'); // String
for (var i = 0; i <= 2; i++) {
    switch (a) {
        case "abc":
            abc++; // variable initially set to 0
            $('#abc').text(abc); // Overwrite the content with the new value
            break;
        case "dfg":
            dfg++;
            $('#dfg').text(dfg);
            break;
[ ...Many cases like the ones listed here ]
            }
if (i === 0) { a = $('#el').attr('data-x1')} 
else if (i === 1) { a = $('#el').attr('data-x2');} 
else if (i === 2) { a = $('#el').attr('data-x3');}
}

What I want to achieve is take the 'a' value, use the value taken as a var name and then work on the variable content.

EDIT: Mostly my need is a function non-depending from the cases, the way I've used in the code above it's ok for now but every 2 months I have to add another case to make it work. The question is: how can I change my code above to make it more "universal" and "elegant" in less line of code?

Something like:

var a = $('#el').attr('data-x');
for (var i = 0; i <= 2; i++) {
     a++; // 'a' must be the name of the var, the name of the variable it's the same as $('#el').attr('data-x').
          // So, 'a' var will change every time the function it's executed as in the switch version of the first block of code above (abc++ or dfg++).
     $('#'+a).text(a);
if (i === 0) { a = $('#el').attr('data-x1')} 
else if (i === 1) { a = $('#el').attr('data-x2');} 
else if (i === 2) { a = $('#el').attr('data-x3');}
}

Here lies my problem: 'a' will be a string ('abc' for example), abc is a global var with the number needed to be incremented and placed in $('#abc'). Here we have for example:

abc = 0; (global var)
a = abc; (scoped var)
abc++; (abc === 1)
$('#abc').text(abc); (equivalent to $('#abc').text(1);)

So I need to call in the loop the 'a' value as the name of the global var, increment it, and then use 'a' as a jquery selector to text the value of the incremented global var inside it. How can I do that?

can you tell what error you are getting from this code and what is the purpose of doing a++;? — Rohit Agrawal, Oct 05 '17 at 10:55
The first block of code just work fine, I don’t know how can I change a variable named by the content of another variable — Flaivo Luminol Zanardi, Oct 05 '17 at 11:02
can you tell what is the purpose of doing a++;? I think you don't need to increment `a` there to match the first block of code's functionality. — Rohit Agrawal, Oct 05 '17 at 11:03
A it’s just there for saying:”the name of the var is the same of the data-x value” — Flaivo Luminol Zanardi, Oct 05 '17 at 11:06
_“I don’t know how can I change a variable named by the content of another variable”_ - https://stackoverflow.com/questions/5187530/variable-variables-in-javascript — CBroe, Oct 05 '17 at 11:19
@RohitAgrawal I've edited the question with some more info, I hope it will be more understandable! — Flaivo Luminol Zanardi, Oct 05 '17 at 13:01

score 1 · Accepted Answer · edited Oct 05 '17 at 12:59

1

If I understand what you need to do, you should try to use eval()

The eval() function evaluates JavaScript code represented as a string.

var a = $('#el').attr('data-x');
for (var i = 0; i <= 2; i++) {
    eval(a + "++");
    $('#'+a).text(eval(a));
    if (i === 0) { a = $('#el').attr('data-x1')} 
    else if (i === 1) { a = $('#el').attr('data-x2');} 
    else if (i === 2) { a = $('#el').attr('data-x3');}
}

edited Oct 05 '17 at 12:59

Rohit Agrawal

1,496
9
20

answered Oct 05 '17 at 11:09

Andrea Carron

1,001
13
22

Can I have an explanation for the -1? – Andrea Carron Oct 05 '17 at 11:14
Downvote questions and answers it’s a common sport in this site, don’t know why... – Flaivo Luminol Zanardi Oct 05 '17 at 11:52
I've edited (again) the question, it was confuse from the beginning, sorry! – Flaivo Luminol Zanardi Oct 05 '17 at 14:13

How to change variable content getting the variable name from a data-attribute in a loop?

1 Answers1