0

大家好，我正在处理 jquery，我在 html 中有一个 html 页面，我在第一个 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>

在上面我有图标加是图像按钮当我单击按钮时它正在工作图像正在移动到目标文件夹我还需要移动名称和价格同时我有两个文本框ex价格应该在何时添加用户选择两个图像

这是我的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>

接下来，我会将单击事件处理程序移动到脚本块。在这里，您可以添加要移动的选择器数组，然后您可以遍历、克隆和附加到文档片段（通过 Jon Resig 关于DOM 文档片段的文章）。然后你只需要将文档片段附加到你的#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 回答