我有一个按钮（添加到包）以在弹出表中传输产品的详细信息。
然而，到目前为止，我所拥有的代码只能将产品的一个细节传输到弹出表。
由于我有很多产品清单，我必须在一个弹出式表格中传输产品的这个细节。
如何使这个弹出表充满基于客户点击的产品的信息？
这是小提琴：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());
答案 0 :(得分：0)
所以你有很多事情需要解决，但最重要的是，你的jQuery并没有绑定你的＆＃34;添加到包＆＃34;纽扣。所以发生的事情是，在您点击任何按钮之前，jQuery已经将第一个产品的详细信息复制到您的灯箱视图中。然后点击＆＃34;添加到包＆＃34;除了使用预先填充的详细信息显示灯箱外，按钮实际上并没有做任何事情。
因此，您需要将实际复制产品详细信息的jQuery代码放入绑定到＆＃34;添加到包＆＃34;的点击事件中。纽扣。然后，您还应该删除显示/隐藏灯箱的所有内联javascript，并将其移动到您的jQuery部分。第三，您的产品信息HTML不一致 - 确保每个产品都有相同的分类跨度包围每种类型的细节，否则jQuery不能抓住它。这里有一些清理过的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">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();
});