0

こんにちは、jquery に取り組んでいます。html に html ページがあります。最初の div には 2 つの div があり、画像の名前と価格が含まれています。現在、空の div である別の div に画像を移動する必要があります。名前と価格だけでなく、移動する必要があります。

これは私のhtmlです：

<div id="div1"> 
  <span class="span1">
     <img src="~/Images/images.jpeg" />
  </span>  
  <span class="span1">1232</span>

  <span class="span2">Cell Phone</span> 
  <span class="span1">3500</span>  
  <a href="#" class="pull-right"><i class="icon-plus" onclick="AddToCart(this)" ></i></a>

</div>
<div id="div1"> 
  <span class="span1">
    <img src="~/Images/images.jpeg" />
  </span>  
  <span class="span1">1232</span>

  <span class="span2">Cell Phone</span> <span class="span1">3500</span>  
  <a href="#" class="pull-right"><i class="icon-plus" onclick="AddToCart(this)" ></i></a>

</div>
actual price<input type="text" id="text1">
total price<input type="text" id="text1">

これは私の別のdivです

<div class="span7" style="border:1px black" id="separate">
  <ul class="thumbnails bootstrap-examples pre-scrollable">
    <li class="span2"> 
      <a href="#" class="pull-right">
        <i class="icon-remove" onclick="AddToCart(this)" >test
        </i>
      </a>
      <a href="#"></a>

      <h5>Starter template</h5>

      <p>500</p>
    </li>
  </ul>
</div>

上記のアイコンプラスは画像ボタンで、ボタンをクリックすると機能します画像は宛先フォルダーに移動します名前と価格も移動する必要があり、同時に2つのテキストボックスがあります価格はいつ追加する必要がありますユーザーが2つの画像を選択

これは私のjqueryです

function AddToCart(obj) {

}

function AddToCart(obj) {
    var $this = $(obj).closest('div');
    var img = $this.find('img');
    $('#separate').append(img);
}​
4

2 に答える 2

1

まず、移動したい要素によりわかりやすいクラス名を追加します。

<div class="item" id="div1">
    <span class="span1">
        <img src="~/Images/images.jpeg" />
    </span>
    <span class="span1">1232</span>
    <span class="span2 name">Cell Phone</span>
    <span class="span1 price">3500</span>
    <a href="#" class="pull-right"><i class="icon-plus">Add</i></a>
</div>

<div class="span7" id="separate">
    <!-- #separate markup -->
</div>

次に、クリック イベント ハンドラーをスクリプト ブロックに移動します。ここに、移動したいセレクターの配列を追加できます。これを反復処理し、クローンを作成して、ドキュメント フラグメントに追加できます ( DOM ドキュメント フラグメントに関する Jon Resig の記事を参照)。次に、ドキュメント フラグメントを #separate div に追加するだけです。

<script>
    (function($){
        $("body").delegate(".item a", "click", function(event){
            event.preventDefault();
            item = $(this).closest(".item");
            elems = ["img", ".name", ".price"];
            fragment = document.createDocumentFragment();

            for (var i = 0; i < elems.length; i++){
                el = item.find(elems[i]);
                fragment.appendChild(el[0]);
            }

            $("#separate").append(fragment);
        });
    })(jQuery);
</script>

これを示す jsFiddle を次に示します - http://jsfiddle.net/9txqc/

于 2012-11-20T15:11:02.120 に答える
0 
function AddToCart(obj) {
          var $this = $(obj).parents('div');
          $('#separate').append($this);
      }


$(".icon-plus").click(function(){
   AddToCart(this);
});

HTML:

<div id="div1"> 
  <span class="span1">
     <img src="~/Images/images.jpeg" />
  </span>  
  <span class="span1">1232</span>

  <span class="span2">Cell Phone</span> 
  <span class="span1">3500</span>  
  <a href="#" class="pull-right"><i class="icon-plus"></i></a>

</div>
<div id="div2"> 
  <span class="span1">
    <img src="~/Images/images.jpeg" />
  </span>  
  <span class="span1">1232</span>

  <span class="span2">Cell Phone</span> <span class="span1">3500</span>  
  <a href="#" class="pull-right"><i class="icon-plus" onclick="AddToCart(this)" ></i></a>

</div>
actual price<input type="text" id="text1">
total price<input type="text" id="text2">
于 2012-11-20T14:10:48.047 に答える