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