0

I'm trying to set a variable attribute name, ie <a data-33="string">, with 33 being a random number generated by Math.random().

I have tried: 

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = 'data-' + randomNum1.toString(); 
$(this).attr({
    attrb : 'someString',
    attrb2 : 'someString'
});

But instead of adding an attribute of data-randomNumber="someString", it adds attrb="someString"

I'm trying to pass multiple attributes. I know I'm missing a basic javascript concept, but any help would be appreciated!

user3251562
  • 17
  • 3
  • 1
    you can't use an object literal to do that... – dandavis Jan 30 '14 at 04:36
  • possible duplicate of [Using a variable for a Javascript object key](http://stackoverflow.com/questions/2274242/using-a-variable-for-a-javascript-object-key) – Bergi Jan 30 '14 at 04:40
  • @Bergi Not exactly a duplicate since the user is unaware of proper usage and his understanding is will be different. – Nagaraj Tantri Jan 30 '14 at 04:44
  • @user3251562 IMHO do try to understand javascript objects and the way they can be accessed. Only knowledge of JQuery wont help you write good code. – Nagaraj Tantri Jan 30 '14 at 04:46
  • +1 @LearningNeverStops Its crucial that people understand pure JavaScript with its objects and other concepts. JQuery is spoiling people :) – Steve Robinson Jan 30 '14 at 04:50

6 Answers6

2

When you are doing, {attrb: "something", attr2: "something"}, the keys, attrb and attr2 are not evaluated and are taken as it is. So you cannot use variables over there.

To solve your problem, what you can do is, call the attr() method with two arguments - 1: the attribute, 2: the value:

var el = $(this);
el.attr(attrb, 'someString');
el.attr(attrb2, 'someString');

In this case the first argument of attr() is evaluated and the variable is substituted with the value.

Steve Robinson
  • 3,759
  • 3
  • 36
  • 57
1

try this

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = 'data-' + randomNum1.toString();
$(this).attr(attrb,"someString");
$(this).attr(attrb2,"someString");
Coder
  • 6,948
  • 13
  • 56
  • 86
0
var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var atts = {};
   atts['data-' + randomNum1.toString()] = 'someString';
$(this).attr(atts);

Setting the names of object literals with variables works using square brackets.

Quentin Engles
  • 2,744
  • 1
  • 20
  • 33
0

jQuery has a built in data() function see here for the proper method documentation. As for your specific propblem I would suggest

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = randomNum1.toString(); 
var $this = $(this);
$this.data(attrb, 'someString');
$this.data(attrb2, 'somestring');
Luke Smith
  • 781
  • 3
  • 7
  • 15
0

Try this:

function getRandom(){
    return (Math.floor(Math.random() * (200 - 100 + 1)) + 100).toString();
}

var attrs = {};

attrs["data-" + getRandom()] = "something";
attrs["data-" + getRandom()] = "something";
attrs["data-" + getRandom()] = "something";

//console.log(attrs);

$(".target").attr(attrs);

This will do something like:

<div class="target" data-108="something" data-123="something" data-107="something">something</div>

What I am doing is first creating the attributes obj separately, then passing in the .attr() method of jQuery.

Working Demo: http://jsfiddle.net/xBdcq/

Ashish Kumar
  • 2,991
  • 3
  • 18
  • 27
0

try like this 

$(this).attr('attr-'+b,'somestring');
Karthick Kumar
  • 2,349
  • 1
  • 17
  • 30