Slidetoggle在点击时无法正常工作

Question

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

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

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

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

这是到目前为止显示我的jQuery脚本的链接：[我的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>

您将看到它现在有多混乱。 我需要能够正确显示值，具体取决于页面上显示的是哪个容器。

默认显示为：

项目数量单价

Box＃1 5 26.99 134.95

单击“发送到多个地址”链接（切换）时，表格行应为：

项目数量单价

Box＃1 1 26.99 26.99

Box＃1 1 26.99 26.99

Box＃1 1 26.99 26.99

Box＃1 1 26.99 26.99

Box＃1 1 26.99 26.99

单击“运送到单个地址”链接（切换）时，表格行应为（如默认值）：

项目数量单价

Box＃1 5 26.99 134.95

任何帮助深表感谢。

谢谢！

Answer 1

杜德，那真的很乱。

刚开始时，请检查您的jQuery，例如：

 $('shipToMultipleLink').hide();
 $('shipToSingleLink').show();

应该

 $('.shipToMultipleLink').hide();
 $('.shipToSingleLink').show();

然后，请整理一下，并更好地解释您的问题，以便我们为您提供帮助。

Answer 2

尝试

  $(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/这是您需要的吗？