使用jQuery'this'與多個元素的選擇器

Question

抱歉，jQuery noob問題在這里，我正在嘗試通過回調函數使所有帶有.thumbnail類的div元素可單擊。 但是，一旦單擊該類的div之一，我就需要該給定div的特定ID，這樣我就可以對該特定div進行進一步的操作。 如果單擊后會使用“ this”來引用該特定的div，或者我以錯誤的方式查看，我會感到困惑。

我確定這是一個非常簡單的問題，jQuery專家需要回答，這是漫長的一天，我的大腦完全僵化了。

示例Sudo代碼：

<script>
$(document).ready(function() {

    $(".thumbnail").click(function() {

        //need to get id of thumbnail that was clicked, this is where I am confused       
        var thumbnail_id = $(this).attr('id')
        alert(thumbnail_id);

     });

});

</script>

<div class=thumbnail" id="1">Tom</div>
<div class=thumbnail" id="2">Jerry</div>
<div class=thumbnail" id="3">Sue</div>
<div class=thumbnail" id="4">Mary</div>
<div class=thumbnail" id="5">Brian</div>

Answer 1

你不覺得縮略圖應該這樣寫"thumbnail" ，而不是thumbnail"

Answer 2

目前尚不清楚您的jQuery問題是什么。 為了滿足你的要求，當單擊您的代碼的對象的問題， click處理程序將被調用， this將被設置為被點擊的DOM元素。 如果存在一個或多個縮略圖類的對象，則此方法有效。

如果您的問題確實是您的HTML錯誤，則應該添加缺少的引號來更改此內容：

<div class=thumbnail" ...

對此：

<div class="thumbnail" ...

僅供參考，一種更好的方法如下。 這可以解決報價問題，並使用數據屬性而不是數字id值：

工作演示： http : //jsfiddle.net/jfriend00/8tczB/

<script>
$(document).ready(function() {
    $(".thumbnail").click(function() {
        //need to get id of thumbnail that was clicked, this is where I am confused       
        var thumbnail_id = $(this).data('id');
        alert(thumbnail_id);
     });
});
</script>

<div class="thumbnail" data-id="1">Tom</div>
<div class="thumbnail" data-id="2">Jerry</div>
<div class="thumbnail" data-id="3">Sue</div>
<div class="thumbnail" data-id="4">Mary</div>
<div class="thumbnail" data-id="5">Brian</div>