Question

我有一个jquery mobiile应用程序，其中包含数百个表。我在每个表的末尾添加了一个动态行，其中包含一个直接从该表的表头派生的“data-name”属性的按钮。

这些表用于对不同类型的产品进行编目，其中一些产品每个型号的尺寸不同，有些则没有。我希望能够做的是每个模型有多个尺寸的那些，在表格中添加一个选择框，然后更新数据名称属性以包括该用户选择的尺寸。

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

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

中结束此操作

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

1 个答案: