当用户 select 来自 select 框时，将数据属性添加到动态创建的按钮

Question

我有一个 jquery 移动应用程序，其中包含数百个 table。我在每个 table 的末尾添加了一个动态行，其中包含一个带有 "data-name" 属性的按钮，该属性直接派生自 table header table.

这些 table 用于对不同类型的产品进行编目，其中一些产品的每个型号尺寸不同，有些则没有。我想做的是对于那些每个模型有多个尺寸的模型，在 table 中添加一个 select 框，然后更新 data-name 属性以包含该用户selected 尺寸。

到目前为止，我已经设法让 select 框更新底部的文本，而不是将其添加到最后的相应按钮...

<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 属性中，所以应该这样做：

改变这个：

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

为此：

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

使用此代码，您应该在 data-name 中得到这样的结果：[previous data]，size [size data]

当用户 select 来自 select 框时，将数据属性添加到动态创建的按钮

Adding a Data Attribute to a dynamically created button when a user selects from a select box

jquery

jquery-mobile