当用户从一个选择框中选择时，将数据属性添加到动态创建的按钮

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：以前的数据]，大小[尺寸数据]