【发布时间】：2017-10-18 18:03:20
【问题描述】：
我希望使用字符串“activeVideo”作为变量，但我无法让它工作。我想我已经很接近做对了，但我已经被困了好几个小时了……我做错了什么？
firstVideo = 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0?ecver=2;autoplay=1';
secondVideo = 'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;autoplay=1';
jQuery('.play-circle').click(function() {
console.log(this.id + 'Video');
activeVideo = this.id + 'Video';
jQuery('.play-circle').fadeOut(0);
jQuery('.video').fadeIn(0);
jQuery('.video-close').fadeIn(0);
jQuery('#' + this.id + 'Video').attr('src', activeVideo);
});
jQuery('.video-close').click(function() {
console.log('closing video');
jQuery(activeVideo).attr('src', '');
jQuery('.video').fadeOut(0);
jQuery('.video-close').fadeOut(0);
jQuery('.play-circle').fadeIn(0);
});body {
background-color: #000000;
}
.banner-wide {
position: relative;
height: 720px;
background: url('https://picsum.photos/1000/500') center/cover;
}
.banner-wide .text {
width: 30%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 7%;
}
.banner-wide .text h3,
.banner-wide .text p {
text-align: left;
color: #ffffff;
}
.video-thumbnail {
z-index: 11;
position: relative;
right: 0;
top: 0;
width: 50%;
height: 360px;
cursor: pointer;
float: right;
padding: 5px;
box-sizing: border-box;
}
.play-circle {
width: 100%;
height: 100%;
background: url('http://addplaybuttontoimage.way4info.net/Images/Icons/13.png') no-repeat center/150px rgba(0, 0, 0, 0.7);
}
.video {
display: none;
width: 100%;
height: 360px;
position: relative;
right: 0;
top: 0;
}
.video-close {
display: none;
position: absolute;
width: 20px;
height: 20px;
top: 14px;
right: 20px;
cursor: pointer;
background: url('http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png') no-repeat center center / 20px rgba(255, 255, 255, 1);
border-radius: 100px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-wide owc">
<div class="video-thumbnail">
<div id="first" class="play-circle"></div>
<div class="video-close"></div>
<iframe class="video" id="firstVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-thumbnail">
<div id="second" class="play-circle"></div>
<div class="video-close"></div>
<iframe class="video" id="secondVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe>
</div>
</div>【问题讨论】：
-
你根本不知道。至少不是正确
-
请不要链接到第三方网站，因为这些链接可能会随着时间的推移而失效。只需在此处以代码 sn-p 的形式发布您的代码。
-
只需将
activeVideo = this.id + 'Video';也放入 close 函数中，它应该可以工作。请注意，您需要声明变量！！，为此使用const,let,var。然后你的代码会在这种情况下崩溃，你可以回到正确的轨道 -
正确的方法是创建一个数组。我还修复了您的其他代码：jsfiddle.net/Lta1mydu
标签： javascript jquery string variables concatenation