Question

我有多个.clickable CSS类和一个数据属性的输入。输入是label元素的唯一子元素。一些标签具有.active CSS类。基本结构看起来像

<label class='[active]'>
  <input type='...' class='clickable' data-value='...'>
  text
</label>

每当我单击'clickable输入时，我都需要获取data-value标签的所有输入中的active个。

使用jQuery是否有一种简单的方法来实现？

我正在尝试使用过滤和映射，但基本上还是卡住了。

Answer 1

尝试一下：

$(document).ready(function() {
  $("input.clickable").click(function() {
    $("label.active > input.clickable").each(function() {
      console.log($(this).data("value"));
      // OR console.log($(this).attr("data-value"));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class='active'>
  <input type='text' placeholder="foo" class='clickable' data-value='hello_world_1'>
</label>

<label class='active'>
  <input type='text' placeholder="foo" class='clickable' data-value='hello_world_2'>
</label>

参考
1. https://api.jquery.com/data/
2. https://api.jquery.com/child-selector/
3. https://johnresig.com/blog/html-5-data-attributes/

获得“表兄弟”的属性

1 个答案: