Question

我正在尝试在用户点击所选元素时交换图片和视频

我有以下内容：

<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标记下保留同一个班级？

Answer 1

从元素中取出这些类并创建另一个包装器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);
})

Answer 2

鉴于您的HTML，here is a jsfiddle解决方案。

$('.component').click(function () {
    var clickClass = $(this).children(0).attr("class");
    var mainClass = $(".main").children(0).attr("class");
    var clickHTML = $(this).html();
    var mainHTML = $(".main").html();
    $(this).html(mainHTML);
    $(".main").html(clickHTML);
    $(this).children(0).attr("class",clickClass);
    $(".main").children(0).attr("class",mainClass);
});

我添加了Bootstrap，但没有图像文件。

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

2 个答案: