Question

我在这里有一些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中是跨度）。 resources-units和span.resources-quantity）。问题是，我不知道如何让它以1：1的方式工作，这意味着一个选择下拉列表＆＃34;改变＆＃34;只有自己行的单位和数量。以下是代码：

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++;
    });

如果我添加一个选择输入并更改选项，那么会发生这种情况。当我添加另一个并更改其选项时，它会获得第一个属性。添加更多 - 同样的事情。无论我改变什么，都需要添加第一个项目的属性值。

Answer 1

尝试从元素而不是变量中获取id，因为您始终使用计数器的id更新元素，而不是使用已单击行的id的元素。

嗯，这柜台究竟做了什么？我看得越多，我就越不了解。我所知道的是，您没有通过使用idCounter引用正确的行来选择正确的元素。

您想要做类似

的事情

$(document).on('change', '.get-resources', 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>

基本上，您从已更改的选择开始，从那里获得单击的选项节点。然后，您将从该选项中获得所需的属性。然后，将几个节点上移到行父级，找到该行内的两列。然后，您可以设置这两列的内容。

将动态创建的下拉列表的自定义属性值添加到另一个元素

1 个答案: