使用jQuery“添加到购物车”

Question

目标

复制一个文本并将他移到另一个元素。

问题

我的应用程序中有一个产品列表，当我点击“添加按钮”时，我想在摘要中添加它们。直到这里，简单，呵呵？！

摘要中的产品将显示其名称和数量。所以我问：如何从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？！

我开始考虑恢复产品标识符的可能性（隐藏工具提示的输入）并对数据库进行查询 - 但是这样可行吗？

提前致谢！

Answer 1

//使用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/

Answer 2

几个月前我写过类似的基于jQuery的东西：https://github.com/yckart/jquery.animateto.js

这是一个没有任何Ajax请求的简单演示，或者

http://yckart.github.com/jquery.animateto.js/