目标
复制一个文本并将其移至另一元素。
问题
我的应用程序中有一个产品列表,当我单击“添加按钮”时,我想在摘要中添加它们。直到这里,容易吗?
汇总的产品将显示其名称和数量。所以我问:如何从DOM中提取此名称并“粘贴”到新位置?
可是等等!当“添加”按钮在产品元素之外时,问题变得很大。我的意思是,“添加按钮”位于代码底部的工具提示内-与产品元素无关。
我想做什么
工具提示具有以下结构:
<div class="tooltip">
<form action="">
<input type="text" name="product_quantity" />
<button type="submit" />
</form>
</div>
我想做以下事情:
<div class="tooltip">
<form action="">
<input type="hidden" name="product_id" value="1" />
<input type="text" name="product_quantity" />
<button type="submit" />
</form>
</div>
然后,通过jQuery获得具有该值的元素(在我们的示例中为1)。
我的官方代码
您可以在FiddleJS或更高版本上看到它:
<ul>
<li>
<div class="product-header">
<h1>Cap</h1>
</div>
<div class="product-body">
<p>A beautiful cap</p>
</div>
<div class="product-controls">
<a href="#">Click here to open the tooltip to select a quantity then add to products summary</a>
</div>
</li>
<li>
<div class="product-header">
<h1>Gears of War — The game</h1>
</div>
<div class="product-body">
<p>TPS by Microsoft Studios</p>
<div class="product-controls">
<a href="#">Click here to open the tooltip to select a quantity then add to products summary</a>
</div>
</div>
</li>
</ul>
<div class="tooltip" style="display: none;">
<form action="">
<input type="text" name="product_quantity" />
<button type="submit" />
</form>
</div>
(更新)也许... AJAX ?!
我开始考虑是否有可能恢复产品标识符(通过隐藏工具提示的输入)并查询数据库-但这可行吗?
提前致谢!
最佳答案
//使用jquery获取产品ID的值
$('.tooltip button').click(function() {
alert($('#product_id').val());
});
如果要使用AJAX,请尝试以下http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/
关于javascript - jQuery的“添加到购物车”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16989729/