jquery - 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>
解决方案
我真的不明白您的代码应该如何工作,因为它依赖于您的 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>
推荐阅读
- jsp - 如何在 JSP 中使用 JSTL 在 textarea 中输出值
- php - Magento 2 - 如何在通过管理面板添加或更新产品时调用一些 api
- html - 样式原生日期选择器的弹出菜单
- python - python中的递归函数调用
- javascript - vue slot props 不能通过什么?
- amazon-web-services - 如何使用 terraform 脚本动态创建 ec2 实例(无需硬编码 AMI ID)
- amazon-cloudformation - Cloudformation 条件嵌套堆栈未解决的资源依赖关系
- adb - 如何在屏幕上显示命令“adb shell input tap x y”反馈?
- python - 使用相同的键在python中合并多个字典,如果键不常见,则将0附加到值
- asp.net - .NET Framework 是如何与 windows 和 IIS 紧密耦合的