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/這是您需要的嗎？