jQuery attr（）方法创建数据破折号属性

Question

I'm trying to figure out why when adding a data-attribute to (Let's say an image) requires the attribute name to be put into quotes. I know that it needs to be done, but if a student asked me I wouldn't have the exact answer why. So take the two examples below.

1.) I'm looking for an explanation why the dash is a problem.
2.) Is there a way to escape it so you don't need to put it in quotes?

This Doesn't work:

$("img").attr({
    alt: "a picture of my cat",
    data-item : "pet",
    data-color : "orange",
});

This Does work

$("img").attr({
    alt: "a picture of my cat",
    'data-item' : "pet",
    'data-color' : "orange",
});

3.) The arguments that are passed to the attr() method is an object literal right?
4.) Is this just a rule in object literal syntax that a dash is not allowed?

Answer 1

1.) In object literals, the - symbol is not allowed as an identifier because it is also the minus operator in javascript.

2.) no, you have to use quotes.

3.) yes.

4.) yes, see 1.

Answer 2

I agree with @Ferdi265 .

However one additional point I would make is to use jQuery.data() .

jQuery.data() doesn't actually update the DOM, it updates a javascript object referencing the element and stores the value there.

It's much better for performance as no DOM manipulation is required.

$("img").attr({
    alt: "a picture of my cat"
}).data({
    item: "pet",
    color: "orange"
});

Obviously this doesn't update your element's attributes, and therefore any future reference to these values will have to be done with jQuery.data() ;

$("img").data("item");

If you're interested in understanding how this works under-the-hood I wrote an article on it a while back:

http://curtistimson.co.uk/jquery/understanding-jquery-data-storage/

Answer 3

this is how I worked around it:

.attr({ style: "font-size : 50px;background-color : powderblue;font-family:arial" })

as a specific example of how to specify multiple attributes in an element creation statement. This is after the above examples did not work.