ReplaceWith JQuery issue

Question

То, что я пытаюсь сделать, - это когда я выбираю один из миниатюр проекта, видео справа заменяется, как показано на рисунке here. Я обнаружил, что не могу делать это более одного раза.

Я искал распространение событий, и мне пришлось бы использовать $ this вместо этого, чтобы каждый раз, когда я нажимаю на другой проект, я могу изменить его на желаемое видео.

Я сделал небольшой взлом, в котором я создал скрытый div со всем содержимым внутри, поэтому функция replacewith могла работать, она работает в одну сторону, но когда я делаю наоборот, кнопки больше не работают. Какие-либо предложения? Большое спасибо заранее

Мой код: here.

$(function() { 
 
\t 
 
var height =1000; 
 
var animSpeed=1000; 
 
var topArrowbtn = $('.arrowTop'); 
 
var bottomArrowbtn = $('.arrowBottom'); 
 
var $slider = $('.projectorganizer'); 
 
var $slideContainer = $('.SlideContainer',$slider); 
 
var $projects = $('.projectC', $slider); 
 
var $p1 = $('.pro1'); 
 
var $p2 = $('.pro2'); 
 

 
var $project = $('.videoSel'); 
 
var $project2 = $('.videoSel2'); 
 
var $project3 = $('.videoSel3'); 
 
var interval; 
 

 
\t function startSlidingUp() { 
 
\t 
 
\t $slideContainer.animate({'margin-top': '+=' +50},animSpeed, function(){ 
 
\t \t /*if($projects.length == */ 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t } 
 
\t 
 
\t \t); 
 

 
\t } 
 
\t 
 
\t function changeProject1() { 
 
\t \t $("div.videoSel").replaceWith($project2); 
 
\t \t 
 
\t } 
 
\t 
 
\t function changeProject2() { 
 
\t \t $("div.videoSel2").replaceWith($project3); 
 
\t \t 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t $p1 
 
\t .on('click',changeProject1); 
 
\t 
 
\t $p2 
 
\t .on('click',changeProject2); 
 
\t 
 
\t /*check if 
 
3 
 
4 
 
5 
 
6 
 
7 
 
// Attach a delegated event handler 
 
$("#list").on("click", "a", function(event) { 
 
    var elem = $(this); 
 
    if (elem.is("[here I will check if class name equals to desired]")) { 
 
     elem.attr("target", "_blank"); 
 
    } 
 
}); 
 
}); 
 
\t */ 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
});

.Projectscontent { 
 
\t width: 900px; 
 
\t max-height: 450px; 
 
\t 
 
\t margin: 3% auto; 
 
\t text-align: center; 
 
\t -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
 
\t -webkit-transform: rotate(0.000001deg); 
 
\t -webkit-border-radius: 20px; 
 
\t -moz-border-radius: 20px; 
 
\t border-radius: 20px; 
 
} 
 
.projectchooser { 
 
\t width: 200px; 
 
\t height: 300px; 
 
\t background-color: #FF9900; 
 
\t float: left; 
 
\t 
 
} 
 

 
.projectorganizer{ 
 
\t overflow:hidden; 
 
\t position:relative; 
 
\t width:100px; 
 
\t margin:25px auto; 
 
\t height:250px; 
 
\t background-color:#0C3; 
 
\t max-width:100px; 
 
\t max-height:250px; 
 
} 
 

 
.arrowTop{ 
 
\t width:100px; 
 
\t height:20px; 
 
\t margin-bottom:5px; 
 
\t background-color:#FF0; 
 
} 
 

 
.arrowBottom{ 
 
\t width:100px; 
 
\t height:20px; 
 
\t margin-top:5px; 
 
\t background-color:#FF0; 
 
\t bottom:0; 
 
\t position:absolute; 
 
} 
 

 

 

 
.hiddenContent{ 
 
\t position:absolute; 
 
\t overflow:hidden; 
 
\t top:0; 
 
\t left:0; 
 
\t max-width:20px; 
 
\t max-height:20px; 
 
\t background-color:#0CF; 
 
\t z-index:-2; 
 
\t 
 
} 
 

 

 

 
.projectC{ 
 
width:100px; 
 
height:80px; 
 
margin:2px 0; 
 
background-color:#3FC; \t 
 
} 
 

 
.Desccontent { 
 
\t float: left; 
 
} 
 
.ContentTitle { 
 
\t background-color: #0CF; 
 
\t width: 900px; 
 
\t min-height: 50px; 
 
} 
 
.ContentTitleTextContainer { 
 
\t max-width: 800px; 
 
\t max-height: 50px; 
 
\t padding-top: 10px; 
 
\t margin: 0 auto; 
 
} 
 
.TitleDesc { 
 
\t 
 
\t min-width: 800px; 
 
\t max-width: 800px; 
 
\t max-height: 50px; 
 
\t margin: 0 auto; 
 
\t font-size:24px; 
 
\t color: #FFF; 
 
} 
 
.ContentDesc { 
 
\t background-color: #0CF; 
 
\t width: 900px; 
 
\t min-height: 100px; 
 
} 
 
.descP { 
 
\t max-width: 800px; 
 
\t max-height: 50px; 
 
\t padding-top: 20px; 
 
\t margin: 0 auto; 
 
} 
 
.Pclass { 
 
\t line-height: 20px; 
 
\t max-width: 800px; 
 
\t max-height: 50px; 
 
\t margin: 10 auto; 
 
\t text-align: justify; 
 
\t overflow: scroll; 
 
\t overflow-x: hidden; 
 
\t color: #FFF; 
 
\t padding-right: 5px; 
 
} 
 
.videoP { 
 
\t -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
 
\t border-bottom-left-radius: 0px; 
 
\t border-top-left-radius: 0px; 
 
\t border-bottom-right-radius: 0px; 
 
\t border-top-right-radius: 0px; 
 
\t -webkit-border-bottom-left-radius: 0px; 
 
\t -moz-border-bottom-left-radius: 0px; 
 
\t -webkit-border-bottom-right-radius: 0px; 
 
\t -moz-border-bottom-right-radius: 0px; 
 
\t -webkit-border-top-left-radius: 0px; 
 
\t -moz-border-top-left-radius: 0px; 
 
\t -webkit-border-top-right-radius: 0px; 
 
\t -moz-border-top-right-radius: 0px; 
 
\t width: 700px; 
 
\t max-height: 300px; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 
@font-face { 
 
\t font-family: "Inconsolata"; 
 
\t src: url('Inconsolata.otf'); 
 
} 
 

 
video { 
 
\t position: fixed; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t min-width: 100%; 
 
\t min-height: 100%; 
 
\t width: auto; 
 
\t height: auto; 
 
\t z-index: -100; 
 
\t transform: translateX(-50%) translateY(-50%); 
 
\t background-size: cover; 
 
\t transition: 1s opacity; 
 
} 
 

 
.footer { 
 
\t clear: both; 
 
}

<div class="Projectscontent"> 
 
    <div class="ContentTitle"> 
 
     <div class ="ContentTitleTextContainer"> 
 
     <p class="TitleDesc">ffffffffffffffffffffffffffffffffffffffff</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> </div> 
 
<div class="projectchooser"> 
 
     <div class="projectorganizer"> 
 
     <div class="arrowClass"> 
 
      <div class="arrowTop"></div> 
 
      <div class="arrowBottom"></div> 
 
     </div> 
 
     <ul class="SlideContainer"> 
 
      <li class="projectC pro1"></li> 
 
      <li class="projectC pro2"></li> 
 
      <li class="projectC pro3"></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="videoP"> 
 
     <div class="videoSel"> 
 
     <iframe src="https://player.vimeo.com/video/152053434"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    <div class="ContentDesc"> 
 
     <div class="descP"> 
 
     <p class="Pclass">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="hiddenContent"> 
 
    <div class="videoSel2"> 
 
    <iframe src="https://player.vimeo.com/video/150052234"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
    </div> 
 
    <div class="videoSel3"> 
 
    <iframe src="https://player.vimeo.com/video/148650205"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
    </div> 
 
</div>

Answer 1

Вместо замены DIV с IFRAME внутри попробовать только заменить содержимое IFrame:

 
$("div.videoSel2 > iframe").attr('src', $('.videoSel > iframe').attr('src')); 

Для обработки события щелчка для двух желтых кнопок вы можете сделать :

 
$('.arrowTop').on('click', function(e) { 
    alert('ok'); 
}); 

$('.arrowBottom').on('click', function(e) { 
    alert('ok'); 
});