当用户单击选定的元素时,我试图交换图像和视频

我有类似以下内容:

<div class='container'>
<h1 class='title'>Title</h1>
    <div class='row'>
         <div class='main'>
           <img class='col-md-7 col-sm-8 img-responsive' src='main.png'/>
         </div>
    </div>
    <div class='row'>
    <a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source   src='video1.mp4'/></video></a>
    <a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video2.mp4'/></video></a>
    <a href='#' class='component'><img class='col-md-4 col-sm-4 img-responsive' src='img1.png'/></a>
      </div>
  </div>


每当用户单击链接时,我都希望将图像或视频交换到main div。我的js

$('.component').on('click', function(){
   var mainSrc = $(this).closest('.container').find('.main').html();
   var newSrc  = $(this).html();
   $(this).html(mainSrc)
   $(this).closest('.container').find('.main').html(newSrc);
})


我的问题是我正在使用bootstrap,如果我将整个html复制到main div下,则它将col-md-4 col-sm-4携带到main div。它将缩小main div宽度。如何在main div和component a标记下保留相同的类?

最佳答案

将这些类从元素中删除,然后创建另一个包装div。您也可以将其分配给.main,但是我不太确定您对.main所做的事情,因此我将不理会它。

<div class='container'>
  <h1 class='title'>Title</h1>
  <div class='row'>
       <div class='main'>
           <div class='col-md-7 col-sm-8 img-responsive'>
             <img class='img-responsive' src='main.png'/>
           </div>
       </div>
  </div>
  <div class='row'>
    <a href='#' class='component'>
      <div class='col-md-4 col-sm-4'>
        <video class='video' controls><source src='video1.mp4'/></video>
      </div>
    </a>
    <a href='#' class='component'>
      <div class='col-md-4 col-sm-4'>
        <video class='video' controls><source src='video2.mp4'/></video>
      </div>
    </a>
    <a href='#' class='component'>
      <div class='col-md-4 col-sm-4'>
        <img class='img-responsive' src='img1.png'/>
      </div>
    </a>
  </div>
</div>


然后您可以执行以下操作来选择和交换媒体。

$('.component').on('click', function(){
   var mainSrc = $(this).closest('.container').find('.main:first-child').html();
   var newSrc  = $(this).children().first().html();
   $(this).html(mainSrc)
   $(this).closest('.container').find('.main:first-child').html(newSrc);
})

关于javascript - 如何将图像和视频交换到另一个div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21589391/

10-10 23:17
查看更多