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

当点击Ship to sinlge地址链接（切换）时，表格行应该是（默认情况下）：

商品数量每个价格

专栏＃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/ 这是你需要的吗？

Slidetoggle在点击时无法正常工作

2 个答案: