有一个加号图标。我希望单击它时将创建一个div,其中将有两个select元素,并且应该动态分配这些select元素的类。理想情况下,它应该像这样工作:
首次单击加号图标时:
<div class="container">
<div>
<select class="selA_0">/*Options*/</select>
<select class="selB_0">/*Option*/</select>
</div>
</div>
第二次单击加号图标时:
<div class="container">
<div>
<select class="selA_0">/*Options*/</select>
<select class="selB_0">/*Option*/</select>
</div>
<div>
<select class="selA_1">/*Options*/</select>
<select class="selB_1">/*Option*/</select>
</div>
</div>
当第三次单击加号图标时:
<div class="container">
<div>
<select class="selA_0">/*Options*/</select>
<select class="selB_0">/*Option*/</select>
</div>
<div>
<select class="selA_1">/*Options*/</select>
<select class="selB_1">/*Option*/</select>
</div>
<div>
<select class="selA_2">/*Options*/</select>
<select class="selB_2">/*Option*/</select>
</div>
</div>
以此类推...
我知道可以将div添加到div(class =“ container”)append()函数,并可以分配class addClass()函数,但addClass()需要一些引用(可能是id)选择元素。但是这种引用在本质上也是动态的。
我如何完成此任务?预先感谢。
原始代码
<script type="text/javascript">
var i=0;
var j=0;
$(" .plus-icon ").click(function()
{
$(" .plus-container").append('<div style="float: left; width: 400px; border: 1px solid black;width: 400px;"></i>Select your Key:   <select id="keyDropDown" name="key_name"><option disabled selected value> -- Select a Key -- </option><!--<option value="name">Name</option>--><option value="ip">ip</option><option value="country">Country</option><!--<option value="city">City</option><option value="region">Region</option><option value="device_type">Device Type</option>--><option value="device">Device</option><option value="visits">Visits</option><option value="page">Pages Visited</option><option value="items">Items Searched</option><option value="user_id">User Id</option><option value="browser">Browser</option></select><br><br></i> Select value for your Key:   <select id="valueOfKey" name="key_value"></select></div>');
$(" #keyDropDown").addClass("keyDropDown"+i);
$(" #valueOfKey").addClass( "valueOfKey" +j);
i=i+1;
j=j+1;
});
答案 0 :(得分:1)
您可以执行以下操作:
$('.add').click(function() {
var c = $(".container > div");
var l = c.length;
c.last().after('<div><select class="selA_'+l+'">/*Options*/</select><select class="selB_'+l+'">/*Option*/</select></div>')
});
我不知道您HTML
的{{1}}的样子,但是用图标删除.add应该很容易。
演示
plus icon
$('.add').click(function() {
var c = $(".container > div");
var l = c.length;
c.last().after('<div><select class="selA_'+l+'">/*Options*/</select><select class="selB_'+l+'">/*Option*/</select></div>')
});