我这里有一些
HTML：
<tr taskId="(#=obj.task.id#)" assigId="(#=obj.assig.id#)" class="assigEditRow" >
<td><select name="resourceId" class="get-resources formElements"></select></td>
<td><span class="resources-units"></span></td>
<td><span class="resources-quantity"></span></td>
<td><input type="text" placeholder="required Q"></td>
<td align="center"><span class="teamworkIcon delAssig" style="cursor: pointer">d</span></td>
</tr>
还有一点JS在这里：
'use strict';
function addResourceFunction(){
let ResourcesJSON = (json) => {
let Resources = json;
console.log(Resources);
let contactsLength = json.length;
let arrayCounter = -1;
let resID;
let resName;
let resUnit;
let resQuantity;
let Option = $('<option />');
let assignedID = $('tr.assigEditRow:last').attr("assigId");
while(arrayCounter <= contactsLength) {
arrayCounter++;
resID = Resources[arrayCounter].ID;
resName = Resources[arrayCounter].name;
resUnit = Resources[arrayCounter].unit;
resQuantity = Resources[arrayCounter].quantity;
$('.assigEditRow').last().find('select').append($('<option>',{
value: resName.toString(),text: resName.toString(),resourceID: resID.toString(),resourceUnit: resUnit.toString(),resourceQuantity: resQuantity.toString()
}));
}
}
$.getJSON("MY JSON URL IS HERE",function(json) {
ResourcesJSON(json);
});
};
那么实际上发生了什么：我从URL(JSON数组)获取数据,在单击时触发addResourceFunction()以创建新的表行并添加带有从数组传递的选项的新选择.正如您从我的HTML标记中看到的那样,选择输入放在td.get-resources中,并且所有这些都有效.我得到了我的日期设置,我填充了选择字段,所有工作都很好.我可以根据需要添加任意数量的行/选择下拉列表.
此外,每个选项都有一些自定义属性(您可以在上面的JS代码中看到它),我想将这些属性的值添加到行的第二和第三列(在HTML中,这些是span.resources-units和span.resources-quantity).问题是,我不知道如何让它以1：1的方式工作,这意味着一个选择下拉列表“仅改变”自己行的单位和数量.以下是代码：
let idCounter = 1;
$(document).on('change','.get-resources',function() {
$('.assigEditRow').last().find('.resources-units').attr('id','units-' + idCounter);
$('.assigEditRow').last().find('.resources-quantity').attr('id','quantity-' + idCounter);
this.resourceUn = $( ".get-resources option:selected" ).attr( "resourceUnit" );
this.resourceQuant = $( ".get-resources option:selected" ).attr( "resourceQuantity" );
$('#units-' + idCounter).append(this.resourceUn);
$('#quantity-' + idCounter).append(this.resourceQuant);
idCounter++;
});
会发生的是,如果我添加一个选择输入,并更改选项,那么事情就可以了.当我添加另一个并更改其选项时,它会获得第一个属性.添加更多 – 同样的事情.无论我改变什么,都需要添加第一个项目的属性值.
解决方法
尝试从元素而不是变量中获取id,因为您始终使用计数器的id更新元素,而不是使用已单击行的id的元素.
嗯,柜台究竟做了什么？我看得越多,我就越不了解.我所知道的是,您没有通过使用idCounter引用正确的行来选择正确的元素.
你想做点什么
$(document).on('change',function() {
//var row = this;
this.find(/* Some path to the second column */).att(/* some att to change */);
this.find(/* Some path to the third column */).att(/* some att to change */);
});
您总是再次使用该行作为根,而不是找到某个ID,因此您只更新该行.
本机：
<table>
<tr>
<td>
<select>
<option data-text="resName1" data-resourceID="resID1" data-resourceUnit="resUnit1" data-resourceQuantity="resQuantity1">1</option>
<option data-text="resName2" data-resourceID="resID2" data-resourceUnit="resUnit2" data-resourceQuantity="resQuantity2">2</option>
<option data-text="resName3" data-resourceID="resID3" data-resourceUnit="resUnit3" data-resourceQuantity="resQuantity3">3</option>
</select>
</td>
<td>
<div class="column2"></div>
</td>
<td>
<div class="column3"></div>
</td>
</tr>
</table>
<script>
document.addEventListener('change',function ( event ) {
var select = event.target,option = select.options[select.selectedIndex],values = {
'text' : option.getAttribute('data-text'),'resourceID' : option.getAttribute('data-resourceID'),'resourceUnit' : option.getAttribute('data-resourceUnit'),'resourceQuantity' : option.getAttribute('data-resourceQuantity')
},row = select.parentNode.parentNode,/* depending on how deep the select is nested into the tr element */
column2 = row.querySelector('.column2'),column3 = row.querySelector('.column3');
column2.textContent = 'some string with the values you want';
column3.textContent = 'some string with the other values you want';
});
</script>
基本上,您从已更改的选择开始,从那里获得单击的选项节点.然后,您将从该选项中获得所需的属性.然后,将几个节点上移到行父级,找到该行内的两列.然后,您可以设置这两列的内容.
