我有两个容器,一个显示分组框、数量和总计,另一个容器显示详细信息。
每个容器的 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
非常感谢任何帮助。
谢谢!
最佳答案
尝试
$(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/ 这是您需要的吗?
关于javascript - Slidetoggle 在点击时无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27434298/