動的に作成されたドロップダウンのカスタム属性値を別の要素に追加する

Question

私は一日中回答を探していましたが、まだ運がありません。これが私の最初の質問は、（...しかし、絶望のうち）ここにある：

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

私はここにHTMLのビットを持っています

実際にここで何が起こっているのですか？私はURL（JSON配列）からデータを取得し、クリックするとaddResourceFunction（）をトリガーして新しいテーブル行を作成し、配列から渡されたオプションで新しいselectを追加します。私のHTMLマークアップから分かるように、select入力はtd.get-resourcesに置かれ、そのすべてがうまくいきます。私は私の日付を設定し、私は選択フィールドを埋めるとすべての良い仕事。私は多くの行を追加することができます/私が望むようにドロップダウンを選択します。また、すべてのオプションにはカスタム属性がいくつかあります（上記のJSコードで確認できます）。これらの属性の値を行の2番目と3番目の列に追加します（HTMLではspan.resources-unitsおよびspan.resources-quantity）。 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++; 
    }); 

私は1つの選択入力を追加してオプションを変更すると、そのことが機能します。別のオプションを追加してオプションを変更すると、最初のものの属性が取得されます。もっと同じものを加える。私が変更したものは、最初に追加された項目の属性値をとります。

ここではあまりにも複雑にしていないことを願っています。私はSOのルールを破ったら謝罪します。それは結局のところ、最初の質問です。 ありがとうございました！

Answer 1

クリックした行のIDを持つ要素ではなく、常にカウンタのIDで要素を更新するため、変数ではなく要素からIDを取得してみてください。

ええと、カウンターは正確に何をしていますか？私はそれを見るほど、理解しにくいです。私が知っていることは、正しい行を参照するためにidCounterを使って正しい要素を選択していないということです。

はあなたが唯一のその行を更新して、代わりに特定のIDを見つける、あなたは常に再びルートとして行を使用

$(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 */); 
}); 

のような何かをしたいです。

ネイティブ：

<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> 

基本的にあなたがそこからあなたがクリックされたオプションのノードを取得し、変更した選択で始まります。次に、そのオプションから必要な属性を取得します。次に、いくつかのノードを行の親に移動し、その行の中の2つの列を探します。次に、これらの2つの列の内容を設定できます。