javascript - 如何获取在 jquery 中选择的项目类别？

Question

我有 2 个图像 (.field-img) ，包装在一个容器 (.group-container) 中，

每个图像都在一个唯一的字段 id 中，所以我的 tpl 被分解为

<div class=group-container>
 <div id=field1>
  <div class=field-img>
 </div></div>
 <div id=field2>
  <div class=field-img>
 </div></div>
</div>

我的js是

$(".group-container .field-img").click(function() {
 alert(".group-container .field-img");

我想要的是自动检测图像是否属于 field1 或 field2。

所以我可以提醒 (".group-container .field1/2 .field-img");

我该怎么做？

谢谢你的帮助

Answer 1

$(".group-container .field-img").click(function() {
   var field=$(this).parent().attr('id');
});

Answer 2

Izzey 解决方案的替代方法是使用.closest以选择器开头的属性（或类名，因为这些 div 更适合拥有一个公共类）

$(".group-container .field-img").click(function() {
    var field = $(this).closest("[id^=field]")[0].id;
});

或者，使用一个共同的类名，

html

<div class=group-container>
 <div class="field" id=field1>
  <div class=field-img>
 </div></div>
 <div class="field" id=field2>
  <div class=field-img>
 </div></div>
</div>

js

$(".group-container .field-img").click(function() {
    var field = $(this).closest(".field")[0].id;
});

Answer 3

$(".group-container .field-img").click(function() {
   var field = this.parentNode.id;
   alert (".group-container ." + field + " .field-img");
});

Answer 4

$(".group-container .field-img").each(function() {
        $(this).click(function(){   
          var fieldid=$(this).parent().attr('id');
        });
});

Answer 5

由于一个元素在另一个元素之内，因此单击无论如何都会向上传播，因此您始终可以将单击绑定到父元素并执行以下操作：

$('div[id^="field"]').on('click', function() {
    alert(".group-container "+this.id+" .field-img");
});

小提琴

甚至动态获取它们：

$('div[id^="field"]').on('click', function(e) {
    alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});

小提琴

​</p>