首页 > 解决方案 > Jquery用自定义ID名称多次附加?有人可以向我发送正确的方向吗

问题描述

我是 jquery 的新手,我正在尝试创建一个过滤器。我有一个过滤器按钮来添加另一个过滤器,这一切都有效,但 P 获取相同的 ID。这是合乎逻辑的。

有人可以向我发送正确的方向,为每个 ID 提供它自己的号码吗?假设有人点击按钮 10 次,每个 ID 得到一个 1,2,3,4,5,6,7,8,9,10,所以我可以用 jquery 再次定位这些。

这是我的脚本:

<script>
$(document).ready(function(){
    $("#Filter2").click(function(){
      $("#Filter2div").css("display", "inline;");
    $("#FilterP").append('<p id="and-or-"><p ID="Attribute2-"></p><p 
id="Operator-Value2-"></p><p ID="Filter_Value2-"></p>' );
$("#Filter2div").append('<br><select ID="andor" onchange="Andor(this)"> <option value="Select">Select</option><option value="-and">-and</option><option value="-or">-or</option></select><input ID="AttributeValue2" Placeholder="Filterable Property"></input><select ID="Operator2" onchange="PS_Operator2(this)"><option value="Select">Select</option><option value="-eq">-eq</option><option value="-ne">-ne</option><option value="-like">-like</option><option value="-notlike">-notlike</option><option value="-ge">-ge</option><option value="-le">-le</option></select><input ID="Filterable_Value2" Placeholder="Filterable Value"></input>'  );

 });
});

和 HTML 部分:

<div ID="Full_Filter">
<pre><p ID="OptionValue"></p> -Filter {<p ID="Attribute"></p><p id="Operator- 
Value"></p><p ID="Filter_Value"></p><p id="FilterP"></p>}</pre>
</div>

标签: jquery

解决方案


我真的不明白您的代码应该如何工作,因为它依赖于您的 HTML 中不存在的元素上的点击功能:$("#Filter2").click(function(){.

但是,这是一个基本示例,说明如何使用类来选择动态创建的元素和 jQuerylength对它们进行计数并根据此计数创建新的 id:

$(document).ready(function(){
  var container = $('#container');
  $('#addButton').on('click', function(){
    var count = $('.addedElement').length;
    container.append('<div id="id-' + count + '" class="addedElement">Element with id "id-' + count + '"</div>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="addButton">ADD</button>
<div id="container"></div>


推荐阅读