CODEWITHSUNDEEP
javascriptjqueryvariablesattributes
user1482261
user1482261

Reputation: 191

Changing variable name with javascript and jQuery

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!

Upvotes: 0

Views: 3347

Answers (4)

musefan
musefan

Reputation: 48415

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)

Upvotes: 1

Adil
Adil

Reputation: 148130

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);
});​

Upvotes: 2

Bruno
Bruno

Reputation: 5822

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.

Upvotes: -1

maček
maček

Reputation: 77778

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

Upvotes: 0

Related Questions