javascript - Slidetoggle 在点击时无法正常工作

Question

我有两个容器，一个显示分组框、数量和总计，另一个容器显示详细信息。

每个容器的 div 数据值是在运行时动态创建的。两个容器都有数据，但页面上显示的默认容器是分组容器。

这些值是使用 jQuery 获取的，以显示在 div 容器之外的“预览”表格中。

我正在尝试使用 slidetoggle 在单击链接时切换容器，并且该部分有效。我遇到的问题是表格，所有值在第一次显示时都不正确，随后在单击链接时不正确

这是一个显示我的 jQuery 脚本的链接:[My jsfiddle][1]

测试标记:

<div class="ToogleGroupContainer">                        
<div class="shipToSingleSection">
        <div class="shoppingCart_Category">
                <div class="shoppingCart_Box">Box#01</div>
                <div class="shoppingCart_qtyArea">
                    <div class="shoppingCart_qtyLabel">QTY</div>
                    <div class="shoppingCart_qty-select">5</div>
                </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 134.95</div>                
            </div>
            <hr />           
</div>  
<div class="shipToMultipleSection" style="display:none;">
           <div class="shoppingCart_Category">
                <div class="shoppingCart_Box">Box#01</div>
                <div class="shoppingCart_qtyArea">
                    <div class="shoppingCart_qtyLabel">QTY</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 26.99</div>

            </div>
            <hr />
</div>
</div>
<table class="tableOrderPreviewTotals" border=1>
    <tr>
        <td class="yord_hdr">Item</td>
        <td class="yord_hdr_center">QTY</td>
        <td class="yord_hdr_center">Each</td>
       <td class="yord_hdr_center">Price</td>    
    </tr>
    <tr>
        <td class="yord_line_item" stlye="display:none;">
            <div id="itemOrderPreview"></div></td>
        <td class="yord_line_qty" stlye="display:none;">
            <div id="qtyOrderPreview"></div></td>
        <td class="yord_line_right" stlye="display:none;">
            <div id="priceEachOrderPreview"></div>
        </td>
        <td class="yord_line_right" stlye="display:none;">
            <div id="subtotalEachOrderPreview"></div>
        </td>   
    </tr>
</table>

<br/>
<a href="" class="shipToMultipleLink">Ship Order to Multiple Addresses</a>

你会看到现在有多乱。我需要能够正确显示值，具体取决于页面上显示的容器。

默认显示应该是:

元素数量每个价格

盒子#1 5 26.99 134.95

单击(切换)“运送到多个地址”链接时，表格行应为:

元素数量每个价格

盒子#1 1 26.99 26.99

盒子#1 1 26.99 26.99

盒子#1 1 26.99 26.99

盒子#1 1 26.99 26.99

盒子#1 1 26.99 26.99

单击(切换)发送到单一地址链接时，表格行应为(如默认):

元素数量每个价格

盒子#1 5 26.99 134.95

非常感谢任何帮助。

谢谢!

Answer 1

尝试

  $(document).ready(function () {
        $('.shipToMultipleLink').click(function () {
            $('.shipToMultipleSection, .shipToSingleSection').slideToggle('fast');
            return false;

        });

            $.each($('.shipToMultipleSection .shoppingCart_qty-select'), function () {
                $("#itemOrderPreview").append($(".shoppingCart_Box").html()).append("<br>")
                $("#qtyOrderPreview").append($(this).html()).append("<br>");

                var each = $('.shoppingCart_Price_Each').html().replace(/Each/,"")
                $("#priceEachOrderPreview").append(each).append("<br>");

                var price = +each * $(this).text()
                 $("#subtotalEachOrderPreview").append(price).append("<br>");
            });

      var h = '<tr class="singleLine" style="display:none;">'
      /* edited */
      h += '<td>' + $(".shoppingCart_Box").html() + '</td>'
      h += '<td>' + $(".shoppingCart_qty-select").html() + '</td>'
      h += '<td>' + $('.shoppingCart_Price_Each').html().replace(/Each/,"") + '</td>'
      h += '<td>' + $('.shoppingCart_SubTotal_Each').html().replace(/Price/,"") + '</td>' 
      h += '</tr>'
      $(".tableOrderPreviewTotals tr:last-child").after(h)

    });

jsfiddle:http://jsfiddle.net/alemarch/k3t0cbcc/4/这是您需要的吗？