當用戶從一個選擇框中選擇時，將數據屬性添加到動態創建的按鈕

Question

我有一個jquery mobiile應用程序，其中包含數百個表。我在每個表格的末尾都添加了一個動態行，其中包含一個帶有直接從該表格表格標題導出的「數據名稱」屬性的按鈕。

這些表格用於對不同類型的產品進行分類，其中一些產品具有不同的尺寸，一些不同。我希望能夠做的是爲那些每個型號有多種尺寸的表格添加一個選擇框，然後更新數據名稱屬性以包含此用戶選擇的尺寸。

到目前爲止，我已經成功地得到選擇框進行更新，在底部的文本，而不是在最後將它添加到corresonding按鈕...

<table> 
    <tbody> 
     <tr> 
      <th>Model</th> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
     </tr> 
     <tr> 
      <td>Weight</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>Size</td> 
      <td class="sizeSelect"> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
      <td> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
      <td> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
     </tr> 
     <tr> 
      <td>something</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>else</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

<table> 
    <tbody> 
     <tr> 
      <th>Model</th> 
      <th>HTL-L4</th> 
      <th>HTL-L8</th> 
      <th>HTL-L</th> 
     </tr> 
     <tr> 
      <td>Weight</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>Size</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>something</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>else</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

添加到有腳本。 ..

// appends a row to the bottom of the tables for Add to Cart Button to be inserted into 
      $('table > tbody').append('<tr class="cartRow"></tr>'); 
      $('table > tbody > tr:last-child').append('<td>Enquire Now</td>'); 

      $('table').each(function() { 
       var $this = $(this); 
       $('tbody > tr > th:not(:first)', this).each(function(){ 


        // appends a cell to the row 
        $('tbody > tr:last-child', $this) 
         .append('<td class="cartButton"><a class="add-to-cart button" data-name="'+$(this).text()+'" href="#basket" style="padding-top:0 !important;margin-bottom:0 !important; height: 3rem !important; line-height: 3rem !important;">Add</a></td>'); 
       }); 

     $('select', $this).change(function(){ 

     $variable = $(this).find(':selected').data('size'); 

     $('.cartButton a', $this).text($variable); 


     }); 

Answer 1

如果我理解正確的話，你要選擇尺寸添加到按鈕的data-name屬性，所以這應該這樣做：

常E本：

$('.cartButton a', $this).text($variable); 

要這樣：

$buttondata = $('.cartButton a', $this).data("name") + ', size ' + $variable; 
$('.cartButton a', $this).data("name",$buttondata); 

有了這個代碼，你應該這樣結束了在data-name：以前的數據]，大小[尺寸數據]