点击后在一个弹出表中传输每个详细信息
Transfer each details in one pop up table on click
我有一个按钮（添加到袋子），用于在弹出表中转移产品的详细信息。
然而，到目前为止，我所拥有的代码只能将产品的一个细节转移到弹出表中。
由于我有很多产品列表，我不得不在一个弹出表中转移产品的详细信息。
如何使这个弹出的表格充满了基于客户点击的产品的信息？
这是小提琴：http://jsfiddle.net/Alkasih/whjc0tta/1/
这是显示产品列表的html代码（在本例中，我只显示两个产品列表）
<ul id="yourlist" style="display:inline-block; overflow:hidden;">
<li>
<img src="indonu-image/hitam.jpg"/>
<p class="content-p"><span class="product-name">Forbiden Rice</span></br>
<span class="content-pp"><span class="content-info">Good Rice</span></br><span class="price-info">200.000</span>
</span></p>
<div class="spanish">
<span>
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Add to bag</a></span>
<span>Buy</span>
</div>
</li>
<li>
<img src="indonu-image/hitam.jpg"/>
<p class="content-p"><span class="product-name">Not Forbiden Rice</span></br>
<span class="content-pp">Good Rice</br>200.000
</span></p>
<div class="spanish">
<span>
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Add to bag</a></span>
<span>Buy</span>
</div>
</li>
</ul>
<!--Pop Up Div-->
<div id="light" class="white_content">
<div id="headerLightBox">
Berikut kami tampilkan bon belanja Anda hari ini. Pastikan seluruh spesifikasi sesuai dengan
kebutuhan Anda.
</div>
<table id="tableInformation" cellspacing="0">
<tr id="headerTableInformation">
<td>Product Name</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr id="contentTableInformation">
<td id="productName-content"></td>
<td id="description-content"></td>
<td id="priceContent"></td>
</tr>
</table>
<div id="buttonWrapper">
<p id="processBlocked">
<a href = "javascript:void(0)"
onclick ="document.getElementById('secondLight').style.display='block';
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='block'">Processed</a></p>
<p id="closeBlocked">
<a href = "javascript:void(0)"
onclick ="document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'">Cancel</a></p>
<p id="expired">Pesanan Anda akan expired pada tanggal: </p>
</div>
</div>
下面是将一个产品的详细信息转换到弹出表的javascript：
$('#productName-content').html($('.product-name').val());
$('#productName-content').html($('.product-name').html());
$('#description-content').html($('.content-info').val());
$('#description-content').html($('.content-info').html());
$('#priceContent').html('Rp. ' + $('.price-info').html());
因此，您有很多事情需要解决，但最重要的是，您的jQuery并没有绑定到您的"添加到包"按钮。因此，在您单击任何按钮之前，jQuery已经将第一个产品的详细信息复制到您的灯箱视图中。然后点击"添加到袋子"按钮，除了显示带有预先填充的详细信息的灯箱之外，实际上什么也没做。
因此，您需要将实际复制产品详细信息的jQuery代码放入绑定到"添加到包"按钮的点击事件中。然后，您还应该删除所有显示/隐藏lightbox的内联javascript，并将其移动到jQuery部分。第三，你的产品信息HTML是不一致的——确保每个产品都有相同的分类跨度，包裹在每种类型的细节上，否则jQuery将无法获取它
<ul id="yourlist" style="display:inline-block; overflow:hidden;">
<li>
<img src="indonu-image/hitam.jpg" />
<p class="content-p"><span class="product-name">Forbiden Rice</span>
</br> <span class="content-pp"><span class="content-info">Product One</span>
</br><span class="price-info">200.000</span>
</span>
</p>
<div class="spanish"> <span>
<a href="#">Add to bag</a></span> <span>Buy</span>
</div>
</li>
<li>
<img src="indonu-image/hitam.jpg" />
<p class="content-p"><span class="product-name">Not Forbiden Rice</span>
</br> <span class="content-pp"><span class="content-info">Product Two</span></span>
</br><span class="price-info">200.000
</span>
</p>
<div class="spanish"> <span>
<a href="#">Add to bag</a></span> <span>Buy</span>
</div>
</li>
</ul>
<!--Pop Up Div-->
<div id="light" class="white_content">
<div id="headerLightBox">Berikut kami tampilkan bon belanja Anda hari ini. Pastikan seluruh spesifikasi sesuai dengan kebutuhan Anda.</div>
<table id="tableInformation" cellspacing="0">
<tr id="headerTableInformation">
<td>Product Name</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr id="contentTableInformation">
<td id="productName-content"></td>
<td id="description-content"></td>
<td id="priceContent"></td>
</tr>
</table>
<div id="buttonWrapper">
<p id="processBlocked"> <a href="#">Processed</a>
</p>
<p id="closeBlocked"> <a href="#">Cancel</a>
</p>
<p id="expired">Pesanan Anda akan expired pada tanggal:</p>
</div>
</div>
以及jQuery:
$(".spanish").on('click', 'a', function (e) {
// get the product details container
var $product_container = $(this).closest('.spanish').prev('.content-p');
var $product_name = $product_container.find('.product-name').text();
var $product_info = $product_container.find('.content-info').text();
var $product_price = $product_container.find('.price-info').text();
$('#productName-content').text($product_name);
$('#description-content').text($product_info);
$('#priceContent').text($product_price);
$('#fade').fadeOut();
$('#light').fadeIn();
e.preventDefault();
});
$('#processBlocked a').on('click', function (e) {
$('#secondLight').fadeIn();
$('#light').fadeOut();
$('#fade').fadeIn();
e.preventDefault();
});
$('#closeBlocked a').on('click', function (e) {
$('#light').fadeOut();
$('#fade').fadeIn();
e.preventDefault();
});
Fiddle：http://jsfiddle.net/whjc0tta/6/
相关文章：
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何在完整日历中的当天点击时显示活动详细信息
- Magento目录价格折扣规则不适用于产品详细信息页面
- 获取本地时间的JS日期，日期对象中没有时区详细信息
- Json阵列的详细信息显示在三页的angularjs中
- 如何获取数组详细信息另一页
- 如何用java脚本从领英获取详细信息
- Javascript函数详细信息
- 如何创建multiselect来显示Django中每个选定项的详细信息
- jQuery:获取图像加载错误的详细信息
- 如何从重定向的支付处理器网站提取交易详细信息并保存到我的rails 4数据库
- JQuery/Javascript来获取给定URL的Http Header详细信息
- 使用javascript/Jquery获取HTML5文件的详细信息
- 在knocket js中显示json对象的详细信息
- 在单击父复选框的同时获取子复选框的详细信息
- 在 Jquery ajax 中，在一个字段中输入时获取详细信息
- 在每个 AJAX 请求(Sencha Touch 2）中发送用户详细信息(会话令牌）
- 谷歌地图 API - 指向地点详细信息页面的链接
- 如何手动馈送高图表主详细信息图表的输入
- 点击后在一个弹出表中传输每个详细信息
