How to get class of a div with specific ID on click?

Question

I'm trying to get class of each div with a specific id when clicked.

Here is what I tried.

$("#chng").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

This works only on first div and not others.

Here is the HTML

<div id="chng" class="a"></div>
<br/>
<div id="chng" class="b"></div>
<br/>
<div id="chng" class="c"></div>
<br/>
<div id="chng" class="d"></div>

I have a hint that each() function can be used here but I don't know how to use it. Please provide with a solution for this. Also is it possible to get url of background image I assign to these div on click?

background: url(bg1.jpg) no-repeat;

Answer 1

Switch it around.

Make the id's your classes and your classes your ids.
IDs must be unique and your classes do not have to be.

HTML:

<div class="chng" id="a"></div>
<br/>
<div class="chng" id="b"></div>
<br/>
<div class="chng" id="c"></div>
<br/>
<div class="chng" id="d"></div>

JS:

$(".chng").click(function() {
   var myID = this.id;
   alert(myID);
});

Answer 2

也许您应该按class属性检测元素的单击，并获取单击的div的id 。

Answer 3

IDs are supposed to be unique, so you should swap your class names and IDs to make it look like this:

<div id="a" class="chng"></div>
<br/>
<div id="b" class="chng"></div>
<br/>
<div id="c" class="chng"></div>
<br/>
<div id="d" class="chng"></div>

then what I would do in JQuery is:

$(".chng").click(function() {
   var myClass = $(this).attr("id");
   alert(myClass);
});

Here's a simple fiddle with my modified version of your code: http://jsfiddle.net/cVYVf/4/

Answer 4

Because id should be unique and you can't use same id for multiple elements. That's why it's working only on first div and not others.

To get background image you can use $(this).css('background-image')

Example:

HTML

<div class="chng" id="a"></div>
<br/>
<div class="chng" id="b"></div>
<br/>
<div class="chng" id="c"></div>
<br/>
<div class="chng" id="d"></div>

JS

$('.chng').click(function() {
    alert($(this).css('background-image').replace('url("', '').replace('")', ''));
});

CSS

.chng {height: 100px;}
#a {background: #ccc url(bg1.jpg) no-repeat;}
#b {background: red url(bg2.jpg) no-repeat;}
#c {background: blue url(bg3.jpg) no-repeat;}
#d {background: green url(bg4.jpg) no-repeat;}

Demo Link

Answer 5

该ID在文档中必须唯一。

Answer 6

To select something by the ID and class, you need to use the selector statement.

$("#id.classname").click(foo);

or in this case

$("#chng.a(or any other class)").click(foo);

http://jsfiddle.net/fzrTN/ - jsfiddle with something to the effect

EDIT 2:

But as has already been stated, it'd just be easier to make unique IDs.

Answer 7

Id can't be twice in a same page, so you can use alternate option, such as name or rel

$("div[rel=chng]").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

change id into rel in html code

<div rel="chng" class="a"></div>
<br/>
<div rel="chng" class="b"></div>
<br/>
<div rel="chng" class="c"></div>
<br/>
<div rel="chng" class="d"></div>

Hope it should work