0
我希望使用字符串'activeVideo'作爲變量，但我無法讓它工作。我覺得我很接近做正確的事情，但我現在一直堅持幾個小時......我做錯了什麼？我如何正確創建一個字符串在JavaScript/jQuery中的變量？
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>
你只是不要。至少不*正確* –
請不要鏈接到第三方網站，因爲這些鏈接可能會隨着時間的推移而死亡。只需在代碼片段中發佈您的代碼就可以了。 –
只需將'activeVideo = this.id +'Video';'放入關閉函數中，它就可以工作。並且請注意，您需要聲明變量!! **，爲此使用'const'，'let'，'var'。然後你的代碼會在這種情況下崩潰，你可以回到正確的軌道 –