ReplaceWith Jquery问题

Question

我要做的是当我选择一个项目缩略图时，右边的视频会被替换为可视化here。我发现虽然我不能做多次。

我一直在搜索事件传播，我必须使用$ this，以便每次点击不同的项目时，我都会将其更改为所需的视频。

我做了一个小小的黑客，我创建了一个隐藏的div，其中包含所有内容，因此replacewith可以工作，它可以单向运行，但是当我执行相反操作时，按钮不再起作用。有什么建议？非常感谢提前:)）

我的代码是here。

$(function() {
	
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;

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

	}
	
	function changeProject1() {
		$("div.videoSel").replaceWith($project2);
		
	}
	
	function changeProject2() {
		$("div.videoSel2").replaceWith($project3);
		
	}
	
	
	
	$p1
	.on('click',changeProject1);
	
	$p2
	.on('click',changeProject2);
	
	/*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" );
    }
});
});
	*/
	
	
	
	
	
});

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

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

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

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



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



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

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

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

.footer {
	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

而是用内部iframe替换div，只尝试替换iframe内容：

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

要处理两个黄色按钮的点击事件，您可以执行以下操作：

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

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