Question

所以我不止一个动态生成的元素具有相同的类名，我试图在jQuery中检查输入。而不是让我点击它们，它只是让我点击生成的第一个元素。

例如：我点击item_1并返回item_1标识，但是当我点击item_2时它不会返回任何内容。

HTML

    <div id="item_1" class="resp"></div>
    <div id="item_2" class="resp"></div>

JS - Jquery

    $(".resp").on("click",() =>{
      var id = $(".resp").attr("id");
      console.log('attempting toggle' + id);
    });

Answer 1

首先，您必须使用普通函数而不是箭头函数（以避免错过上下文）。其次 - 使用this关键字来引用实际点击的元素。

$(".resp").on("click", function() {
  console.log('attempting toggle ' + this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">A</div>
<div id="item_2" class="resp">B</div>

Answer 2

这是因为.attr('id')返回集合中第一个匹配元素的id属性的值。

相反，为处理程序使用旧的学校函数，以便this值等于单击的div，然后获取其id：

$(".resp").on("click", function() {
  var id = $(this).attr('id');
  console.log('attempting toggle ' + id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">First</div>
<div id="item_2" class="resp">Second</div>

Answer 3

你在这里做的是引用类名来获取id。这会收集第一个类名的id，这不是你想要的。您需要做的是使用this关键字正确获取ID。

删除箭头功能并稍微更改内部代码后，它应如下所示：

$(".resp").on("click", function() {
  var id = this.id;
  console.log('attempting toggle: ' + id);
});

还要确保您已正确安装JQuery。从here获取您的JQuery嵌入代码。另外，请记住在JavaScript代码之前包含您的JQuery代码。

类不工作jQuery

3 个答案: