当用户单击选定的元素时,我试图交换图像和视频
我有类似以下内容:
<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/