如何在點擊時獲取具有特定ID的div的類？

Question

我正在嘗試單擊時獲取具有特定ID的每個div的類。

這是我嘗試過的。

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

這僅適用於第一分區，而不適用於其他分區。

這是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>

我有一個提示，可以在這里使用each（）函數，但是我不知道如何使用它。 請為此提供解決方案。 也有可能獲得我點擊分配給這些div的背景圖片的網址嗎？

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

Answer 1

切換一下。

將ID設為您的班級，並將您的班級設為ID。
ID 必須是唯一的 ，您的類不必是唯一的 。

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

ID應該是唯一的，因此您應該交換您的類名和ID，使其看起來像這樣：

<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>

那么我在JQuery中要做的是：

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

這是我修改后的代碼的簡單提示： http : //jsfiddle.net/cVYVf/4/

Answer 4

因為id應該是唯一的，並且您不能對多個元素使用相同的id。 這就是為什么它僅適用於第一股而不是其他人的原因。

要獲取背景圖片，您可以使用$(this).css('background-image')

例：

的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;}

演示鏈接

Answer 5

該ID在文檔中必須唯一。

Answer 6

要通過ID和類選擇某些內容，您需要使用選擇器語句。

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

或者在這種情況下

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

http://jsfiddle.net/fzrTN/-jsfiddle具有一些效果

編輯2：

但是，正如已經指出的那樣，唯一的ID變得更容易。

Answer 7

同一頁中的ID不能為兩次，因此您可以使用替代選項，例如name或rel

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

在html代碼中將id更改為rel

<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>

希望它能工作