Javascript移动多个元素以分隔div和back [英] Javascript move multiple elements to separate div's and back

问题描述

有3个视频，放在3个独立的div中。
还有3个单独的div，但在页面的其他位置（比如contA和contB和contC）。
我希望如果我点击video1，那么video2和video3会转到contA和contB，而video1会转到contC。
如果我再次点击video1，所有视频都会回到原来的位置。
如果我点击video2（在contA中），那么video1进入contA，video3进入contB，video2进入contC。

There are 3 videos, placed in 3 separate div's. There also are 3 separate div's, but in other position of a page (lets say contA and contB and contC). I want that if I click on the video1, then video2 and video3 goes to contA and contB, and video1 goes to contC. If I click video1 again, all videos go back to their original position. If I click on video2 (while its in contA), then video1 goes to contA, video3 goes to contB, video2 goes to contC.

我准备好了一个jsbin演示：
Jsbin DEMO

I have prepared a jsbin demo: Jsbin DEMO

任何人都可以提供帮助吗？赞赏！

Anyone could help? Appreciated!

(根据要求添加了代码）

(Added a code as requested)

HTML：

    <div id="vid1">
          <video id="Video1" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>

    <div id="vid2">
          <video id="Video2" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>

    <div id="vid3">
          <video id="Video3" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>

<div id="contA"><br>first container<br></div>
<div id="contB"><br>second container<br></div>
<div id="contC"><br>third container<br></div>

JavaScript：

JavaScript:

$(window).load(function()
{
    //add event for all videos 
    $('.videos').click(videoClicked);


function videoClicked(e)
{
        //get a referance to the video clicked
    var sender = e.target;

    //get all the videos 
    var $videos = $('.videos');

      $videos.appendTo('#contA');
      $videos.appendTo('#contB'); //but I need each video to be put to different div: #contA, #contB...

$videos.not(sender).appendTo('#contC'); //if I put the clicked video into this container, it does not go back to original one.
}
});

推荐答案

认为这就是你要找的东西，但是它基于示例中使用的命名约定。我也冒昧地将contA / contB和contC重命名为cont1，cont2和cont3，因为它更容易操作。

Think this is what you're looking for, but it's based on the naming convention used in the example. I also took the liberty of renaming contA/contB and contC to cont1, cont2 and cont3, because it's easier to manipulate.

JSBin演示

  //remember last video clicked (you could check last container instead)
var lastclicked;

function videoClicked(e)
{
    //get a reference to the video clicked
    var sender = e.target;
  //get all the videos 
    var $videos = $('.videos');  

    if(sender==lastclicked){
      //reset to original positions

      $.each($videos,function(){
        var ind =     this.id.substring(this.id.length-1); //based on the video + number naming convention
        $(this).appendTo('#vid' + ind);
      });
      lastclicked = null;
      return;
    }

    lastclicked= sender;  

     var i = 1;  
     //place all non clicked videos in cont1/cont2/etc
     $.each($videos.not(sender),function()
     { 
       $(this).appendTo('#cont' + i++ );
     });

     //place the clicked video in the last container
     $(sender).appendTo('#cont' + i ); //always cont3 with fixed divs, but this is dynamic in case you add more


}
});

这篇关于Javascript移动多个元素以分隔div和back的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！