javascript - 如何获取动态给定 ID 的元素的 ID？

Question

当复选框被选中时，我试图做一个简单的显示，但我无法获取元素，因为元素的 ID 是由 PHP 动态分配的。

该元素将在 foreach 循环内，因此将有多个具有动态给定 ID 的实例。

例子:

//Laravel blade template
<element id="attrb{{ $elem->id }}> "></element>

//Javascript
if ($("#attrb*ID").is(":checked")) {
    $("#attrbs-container").show();
} else {
    $("#attrbs-container").hide();
}

Answer 1

使用 Jquery

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="attrb1" value="1" />

运行，并选中复选框。您可以将 console.log 替换为您的 .show 或其他内容。

选择器 input[id^="attrb"] 表示 input 的 id 为 ^= 以 attrb 开头。如果这些是您仅有的复选框，您也可以使用 input[type="checkbox"]，但它不太具体。

改变与点击

change 当元素的数据(状态)改变时触发。 click 将在您单击时触发。在这种情况下，使用哪种可能无关紧要。 change 与 click 的一个更好的例子是使用单选按钮，然后点击一个已经选中的单选按钮。复选框在选中时取消单击，单选按钮则没有那么多。我只是习惯于使用 change 而不是 click 进行状态更改。

$('input[id^="attrb"]').click(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

运行并单击 radio 2 次。它会触发 2 次。

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

在这里做同样的事情，但有变化。这就是区别。

动态与动态

我的意思是 DYNAMIC 是在客户端运行时发生变化的东西，Dynamic 是静态 HTML，其中 ID 仅在服务器端发生变化。对于 DYNAMIC 你想像这样使用 on

 $(someparent).on('change', 'input[id^="attrb"]', function(e){ ... });

其中 someparent 是一个在运行时不会改变的静态元素。这将使用事件委托(delegate)和“冒泡”来查找在客户端更改的内容。

我不认为你指的是 DYNAMIC，但我把它包括在内以防万一。

干杯!