分离图像,然后将其附加到分离的位置

时间:2012-10-23 21:17:42

标签: jquery append detach

我的经验水平 - 我正在制作一个自定义滑块,这是我第一次使用jQuery,但我认为我对html,css和jquery一起做了很好的处理,但仍然有我的noob-ness正在进行。

我的问题 - 我有17个div标记为这样,我想删除img标记:

      <div class="slide" id="zero">
        <h2>April 1, 2011</h2>
        <img src="img/1_april12011.png"/><p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="one">
        <h2>April 2011</h2>
        <img src="img/2_april2011.png"/> <p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="two">
        <h2>August 2011</h2>
        <img src="img/3_aug2011.png"/><p>Lorem Ipsum</p>
      </div>

通过使用.detach()和以下jQuery,我可以很容易地做到这一点:

 $('.slide').delegate('click', function(){ 
      if(imageToAttach == null){
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log
      }else{
        $(imageToAttach).appendTo(attachLocation);
        console.log('trying to append ' + imageToAttach + ' to ' + attachLocation);
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log('detached ' + imageToAttach);
      }});

我正在使用var = imageToAttach和attachLocation来跟踪删除的图像以及删除的位置,以便我可以在需要时再次将其附加到该特定div(当单击另一个图像时,或者点击右控制)所以如果我能得到这个 - http://jsfiddle.net/lorenzo_vm/nbF8d/3/ - jsfiddle工作,那么我相信我能做我想做的事。

几个小时的研究和后来摆弄

我想我想知道我想要做什么,我将使用.hide()和.show(),但我仍然好奇关于上面提到的内容小提琴...也就是说,我如何让img重新插入到我点击另一个div时所用的同一个div ...如果你,善良的stackoverflow用户,不会介意,你能不能告知我可以更简单地将div分配给某种数组,而不是使用id =“zero”id =“one”等。

这样的事情?

var slides = $('.slide');
var numberOfSlides = slides.length;
var slideArray[] = null; 

我只是使用for循环将slides.length的索引分配给数组中的每个点吗?

for( var i=0;i<=numberOfSlides;i++){
   slideArray[i] = ?;
}

或者var是否会播放数组?我有点困惑。

非常感谢!

  • Michael

1 个答案:

答案 0 :(得分:0)

下面。我更新了你的小提琴,做我认为你正在寻找的东西 - 主要是。不太确定,因为这种行为对我来说很奇怪,而且我不知道为什么会这样做...

http://jsfiddle.net/nbF8d/12/

这是相关的代码,可以简化为:

$(document).ready(function(){
    var imageToAttach;
    var attachLocation;

    $('.slide').on('click', function(){ 
      if(imageToAttach != null){
        $(imageToAttach).appendTo(attachLocation);
      }

      attachLocation = $(this);
      imageToAttach = $(this).find('img').detach();
   });
});
​

基本上,当你只是存储对被点击元素的引用时,你试图找到一个元素“id”。

attachLocation = $(this);

那样appendTo有一个元素而不仅仅是id的值(假设你使用$(this).attr('id')获取了实际的id)

此外,您的示例未声明变量或将侦听器置于就绪调用中。

另请注意,我切换到.on而不是.delegate - 请参阅:“从jQuery 1.7开始,.delegate()已被.on()方法取代。”