이미지와 비디오를 다른 div로 바꾸는 방법은 무엇입니까?

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를 사용하고 있다는 점이다 내가 내 main 사업부에서 전체 HTML을 복사하면, 그것은 main DIV에 col-md-4 col-sm-4를 전달합니다. div 너비는 main으로 줄어 듭니다. 동일한 클래스를 main div 및 componenta 태그 아래에 유지하려면 어떻게해야합니까?

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

해결 방법은 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); 
}); 

부트 스트랩을 추가했지만 이미지 파일이 없습니다.