使用javascript和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!

Answer 1

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

Answer 2

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)

Answer 3

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

Answer 4

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.