Question

嗨所有iam在jquery上工作我在html中有一个html页面我有两个div在第一个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>

在上面我有icon-plus是图像按钮它工作当我点击按钮图像移动到目标文件夹我需要移动名称和价格也并且同时我有两个文本boxex，当用户选择两个图像时，价格会加上

这是我的jquery

function AddToCart(obj) {

}

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

Answer 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>

接下来，我将click事件处理程序移动到脚本块。在这里，您可以添加一个您想要移动的选择器数组，然后您可以迭代，克隆并附加到文档片段（通过Jon Resig在DOM Document Fragments上的文章）。然后，您只需将文档片段附加到#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/

Answer 2

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">

如何使用jquery将内容和图像移动到另一个div？

2 个答案: