Changing variable name with javascript and jQuery

Question

How to shift between variable names in jQuery and change them?

//predefined variables
var s1='';
var d2='';
//trying to change variables by .attr() parameter but no luck
$('body').on('click','span', function() {
var $(this).parent().attr('data-scan')=$(this).attr('id');
});

HTML

<div data-scan="s1"><span id="banana">Banana</span><span id="apple">Apple</span></div>
<div data-scan="d2"><span id="orange">Orange</span><span id="apple">Apple</span></div>

How can I change specific variables? I do't care about changing attr papameter, all I need is changing predefined global var parameters!

you're missing a quote to end your data-scan attribute <div data-scan="s1"> and if you want that property to be blank initially do <div data-scan=""> — Bruno
– Bruno, Commented Nov 22, 2012 at 10:07

Adil · Accepted Answer · 2012-11-22 10:21:44Z

2

You are using wrong syntax of attr()

Syntax: attr( attributeName , value)

Change

var $(this).parent().attr('data-scan')=$(this).attr('id');

To

$(this).closest('div').attr('data-scan',$(this).attr('id'));

You code would be

Live Demo

$('body').on('click','span', function() {
    debugger
 $(this).closest('div').attr('data-scan',$(this).attr('id'));

    s1=$(this).closest('div').attr('data-scan');
    alert(s1);
});

edited Nov 22, 2012 at 10:21

answered Nov 22, 2012 at 10:04

Adil

148k25 gold badges217 silver badges207 bronze badges

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

4 Comments

user1482261 Over a year ago

and how to store data-scan variable in global var?

Adil Over a year ago

You have alread declared global variable assign value to it in click event like this, s1=$('[data-scan=s1]').attr('id');

musefan Over a year ago

@Adil, that is wrong, it will conflict with the other part of his question. Which is changing the data-scan value

user1482261 Over a year ago

I can't define every variable like s1 one-by-one, threre will be 40-50 variables I want to change! This is only a small example with 2 different variables.

musefan · Accepted Answer · 2012-11-22 10:32:32Z

1

Firstly, your html for the data-scan attributes is wrong, you have no closing quotes.

Secondly, you can the data() jquery function to access data attributes.

Thirdly, you cannot set values by using the = operator.

You want something like this:

 $(this).parent().data('scan', $(this).attr('id'));

or, without the data() function:

 $(this).parent().attr('data-scan', $(this).attr('id'));

Here is a working example

To get the value you can do one of the following:

var dataScan = $(this).parent().data('scan');

or

var dataScan = $(this).parent().attr('data-scan');

Your exact requirements for setting a variable based on the data-scan value

Based on your comments and code, I think it has not been clear what you were trying to do. I think I have worked it out though and you want to use the data-scan value to determine which global variable should be set...

//predefined variables
var s1='';
var d2='';

$('body').on('click','span', function() {
    var variableType = $(this).parent().data('scan');
    var valueToSet = $(this).attr('id');
    if(variableType == "s1"){
       s1 = valueToSet;
    }
    else if(variableType == "d2"){
       d2 = valueToSet;
    }
});

Here is an example of what I think you are trying to do.

However, if you have lots of variables then it is not ideal to use so many if/else statements. So you could use the javascript eval() function.

var variableType = $(this).parent().data('scan');
var valueToSet = $(this).attr('id');

eval("" + variableType + " = '" + valueToSet + "';");

See here for an example

But be careful the your eval code is subjected to user injected values (not that javascript is safe from users anyway)

edited Nov 22, 2012 at 10:32

answered Nov 22, 2012 at 10:05

musefan

48.5k21 gold badges144 silver badges193 bronze badges

5 Comments

user1482261 Over a year ago

I need to change only specific predefined global variables .data() is not what I want

musefan Over a year ago

@user1482261: So use the second example, I already edited that in before your comment

musefan Over a year ago

@user1482261: I have added some code which I think is exactly what you need. It was not clear from your original question, but based on your comments and code I think this is what you are after?

user1482261 Over a year ago

Yes, that's what i'm looking for! But I plan to set 40-50 variables, maybe even more. This is only a small example of what i needed. Is thre any workaround? I can't afford to check for 40-50 if-esle's

musefan Over a year ago

@user1482261: check my update, should help you alot. The eval function works like magic, but don't overuse it!

maček · Accepted Answer · 2012-11-22 10:05:35Z

0

You're pretty close!

// set
$('#item').attr('data-scan', 'set new value');

// get
var dataScan = $('#item').attr('data-scan');
console.log(dataScan); //=> set new value

answered Nov 22, 2012 at 10:05

maček

78k37 gold badges172 silver badges200 bronze badges

Comments

Bruno · Accepted Answer · 2012-11-22 10:10:21Z

-1

Probably best if you use .prop() rather than .attr()

$(this).parent().prop('data-scan', $(this).attr('id') );

As the jQuery api documentation states

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

answered Nov 22, 2012 at 10:10

Bruno

5,8222 gold badges29 silver badges44 bronze badges

2 Comments

musefan Over a year ago

Hmmmm... you sure you have this right? My understanding is the prop is for properties of objects such as selectedIndex and tagName. where as attr should be used for attributes, such as data-scan

musefan Over a year ago

Seems I am correct, here is an example - unfortunately, for you, I must vote this answer down because it doesn't work

Collectives™ on Stack Overflow

Changing variable name with javascript and jQuery

4 Answers 4

4 Comments

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related