目标

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

问题

我的应用程序中有一个产品列表,当我单击“添加按钮”时,我想在摘要中添加它们。直到这里,容易吗?

汇总的产品将显示其名称和数量。所以我问:如何从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/

10-12 12:39
查看更多