0

目標

1 つのテキストをコピーして、別の要素に移動します。

問題

アプリケーションに製品のリストがあり、「追加ボタン」をクリックしたときにそれらを要約に追加したいと考えています。ここまで、簡単でしょ!?

概要の製品は、彼の名前と数量とともに表示されます。だから私は尋ねます：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?!

(ツールチップの入力を非表示にして) 製品 ID を復元し、データベースにクエリを実行する可能性について考えましたが、実現可能でしょうか?

前もって感謝します！

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 に答える