Question

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

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

有人可以帮忙吗？理解！

编辑:(根据要求添加了代码）

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的：

$(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.
}
});

Answer 1

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

JSBin demo

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


}
});

Answer 2

我会编辑这个答案，因为所需的结果会变得更清晰，但我想我可以给你一些信息，让你朝着正确的方向前进。

代码部分＆＃34;但我需要将每个视频放到差异中＃34;

我会利用数据属性，让每个控件跟踪自己。

    $video.each(function()
    { 
        var targetdiv = $(this).data('origonal-div');
        $(targetdiv.ToString()).append(this);
                    //optionally update the data value to keep track of the next location to append to.
    }

如果您需要更多信息，请在jsbin上更新一些问题，以便我可以看到您遇到问题的地方。

干杯

Javascript移动多个元素以分隔div和back

2 个答案: