添加到cart"与jQuery

目标

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

我的应用程序上有一个产品列表，当我点击"添加按钮"时，我想在摘要中添加它们。直到这里，轻松，对吧?!

汇总上的产品将显示他的名字和数量。所以我问:如何从DOM中提取这个名称并将其"粘贴"到新的位置?

但是…等等!当"add"按钮位于product元素之外时，问题就大了。我的意思是，"添加按钮"位于代码底部的工具提示中，与产品的元素没有关系。

我想做什么

工具提示的结构如下:

<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 ? !

我开始考虑恢复产品标识符的可能性(通过工具提示的输入隐藏)，并对数据库进行查询-但这是可行的吗?

提前感谢!