如何将图像和视频交换到另一个div？

问题描述

我有类似如下的内容：
$ b 我试图在用户点击选定元素时交换图片和视频。 $ b

 < div class ='container'> 
< h1 class ='title'>标题< / h1> 
< div class ='row'> 
< div class ='main'> 
 < / div> 
< / div> 
< div class ='row'> 
< a href ='＃'class ='component'>< video class ='video col-md-4 col-sm-4'controls>< source src ='video1.mp4'/ >< /视频>< / A> 
< a href ='＃'class ='component'>< video class ='video col-md-4 col-sm-4'controls>< source src ='video2.mp4'/ >< /视频>< / A> 
< a href ='＃'class ='component'>< img class ='col-md-4 col-sm-4 img-responsive'src ='img1.png'/><<< ; / A> 
< / div> 
< / div> 
  

我想将图片或视频交换到 main div，只要用户点击链接。我的js

$ $ $ $'code $（'。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 带到主要 div。它会缩小主要 div的宽度。如何在 main div和组件 a 标签？

解决方案

将这些类从元素中取出并创建另一个包装div。您也可以将它分配给.main，但我不太清楚您使用.main做了什么，所以我只是将其保留。

 < div class ='container'> 
< h1 class ='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> 
  

然后你可以做这样的事情来选择和交换媒体。

$ b $（'。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）;
}）


I am trying to swap image and the videos when user clicks a selected element

I have something like the following:

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

I want to swap the image or video to the main div whenever the user click the link. My 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);
})

My problem is that I am using bootstrap and if I copy the entire html under my main div, it carries the col-md-4 col-sm-4 to the main div. It will shrink the main div width. How do I keep the same class under main div and component a tag?

解决方案

Take those classes out of the elements and create another wrapper div. You can assign it to .main as well, but I'm not too sure what you're doing with .main, so I'll just leave that alone.

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

and then you can do something like this to select and swap the media.

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

这篇关于如何将图像和视频交换到另一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！