0

目标

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

问题

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

摘要上的产品将显示他的姓名和数量。所以我问：我怎样才能从 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？！

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

提前致谢！

4

2 回答 2

0

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

于 2013-06-07T17:42:04.053 回答
0

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

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

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

于 2013-06-07T17:45:43.560 回答