2個具有相同CSS和JS的按鈕不起作用。

看到這個fiddle。這是我的手錶預告片按鈕，第一個按鈕工作得很好。但第二個觀看預告片按鈕不起作用。2個具有相同CSS和JS的按鈕不起作用。

它有什麼問題？

這裏是我的代碼：

HTML：

<button id="watchbutton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton">Watch Trailer &#9658</button> 

<div id="close"> 
<div id="trailerdivbox"> 
<div class="videoWrapper"> 
    <iframe id="video" class="trailervideo" width="560" height="315" data- 
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 
</div>

CSS：

/* Watch Trailer Button CSS */ 

#watchbutton { 
background-color: #f2f2f2; 
color: red; 
font-weight: 600; 
border: none; 
/* This one removes the border of button */ 
padding: 10px 12px; 
} 

#watchbutton:hover { 
background-color: #e2e2e2; 
cursor: pointer; 
} 

#trailerdivbox { 
display: none; 
width: 100%; 
height: 100%; 
position: fixed; 
top:0%; 
overflow: auto; /* Enable Scrolling */ 
background-color: rgb(0, 0, 0); 
/* Fallback color */ 
background-color: rgba(0, 0, 0, 0.4); 
/* Black w/ opacity */ 
} 

.videoWrapper { 
position: relative; 
padding-bottom: 56.25%; 
/* 16:9 */ 
padding-top: 25px; 
height: 0; 
} 

.videoWrapper iframe { 
position: absolute; 
max-width: 560px; 
max-height: 315px; 
width: 95%; 
height: 95%; 
left: 0; 
right: 0; 
margin: auto; 
}

的Javascript

<script> 
// Get the modal 
var modal = document.getElementById('trailerdivbox'); 

// Get the button that opens the modal 
var btn = document.getElementById("watchbutton"); 

function playVideo() { 
var video = document.getElementById('video'); 
var src = video.dataset.src; 

video.src = src + '?autoplay=1'; 
} 

function resetVideo() { 
var video = document.getElementById('video'); 
var src = video.src.replace('?autoplay=1', ''); 

video.src = ''; 
video.src = src; 
} 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
modal.style.display = "block"; 
playVideo(); 
} 

var trailerbox = document.getElementById("close"); 

trailerbox.onclick = function() { 
modal.style.display = "none"; 
resetVideo(); 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
if (event.target == modal) { 
modal.style.display = "none"; 
resetVideo(); 
} 
} 

</script>

來源

2017-06-02 Punit Mishra

我並不是說這是唯一的問題，但你的兩個按鈕都有相同的ID。這立即是你需要解決的**問題。ID的意思是與文檔中的其他內容完全獨立，這意味着**沒有元素應該與另一個元素**共享一個ID。 – Frits

在修復與雙ID的問題 - 由弗裏茨，普拉薩德及其他提到的 - 你仍然需要告訴'playVideo'播放不同的視頻，這取決於你按哪個按鈕。參見[**我的回答下面**]（https://stackoverflow.com/questions/44330728/2-buttons-with-same-css-and-js-are-not-working/44331691#44331691）的方式要做到這一點。 –

嘗試用classname代替id。因爲id是整個HTML。對於選擇使用獨特與querySelectorAll()

更新

視頻的聲明SRC在data-src按鈕。然後用playvideo(this.dataset.src)函數傳遞參數。

// Get the modal 
 
var modal = document.getElementById('trailerdivbox'); 
 

 
// Get the button that opens the modal 
 
var btn = document.querySelectorAll('.watchbutton') 
 

 
function playVideo(src) { 
 
    var video = document.getElementById('video'); 
 
    video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe 
 
} 
 

 
function resetVideo() { 
 
    var video = document.getElementById('video'); 
 
    var src = video.src.replace('?autoplay=1', ''); 
 

 
    video.src = ''; 
 
    video.src = src; 
 
} 
 

 
// When the user clicks the button, open the modal 
 
btn.forEach(function(a){ 
 
a.onclick = function() { 
 
    modal.style.display = "block"; 
 
    playVideo(this.dataset.src); // pass the src 
 
} 
 
}) 
 

 
var trailerbox = document.getElementById("close"); 
 

 
trailerbox.onclick = function() { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
    } 
 
}

/* Watch Trailer Button CSS */ 
 

 
#watchbutton { 
 
    background-color: #f2f2f2; 
 
    color: red; 
 
    font-weight: 600; 
 
    border: none; 
 
    /* This one removes the border of button */ 
 
    padding: 10px 12px; 
 
} 
 

 
#watchbutton:hover { 
 
    background-color: #e2e2e2; 
 
    cursor: pointer; 
 
} 
 

 
#trailerdivbox { 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    /* Enable Scrolling */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    max-width: 560px; 
 
    max-height: 315px; 
 
    width: 95%; 
 
    height: 95%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer &#9658</button> 
 
<br> 
 
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer &#9658</button> 
 

 

 

 
<div id="close"> 
 
    <div id="trailerdivbox"> 
 
    <div class="videoWrapper"> 
 
     <iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br>

來源

2017-06-02 14:01:34 prasanth

工作。但我忘了一件事。看到這個小提琴：https://jsfiddle.net/kz0xxe22/8/ 兩個按鈕都打同一個視頻，你能告訴我，如何解決它？那個盒子有很多ID，哪一個可以修復？ –

@PunitMishra看到我更新的答案。我被編輯，因爲你需要一個 – prasanth

你不能有相同的ID。將ID改爲別的。

<button id="watchbutton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton2">Watch Trailer &#9658</button>

來源

2017-06-02 14:00:17 tech2017

該ID被鏈接到CSS + JS，我不能在CSS + JS每個按鈕改變ID。這會讓我的頁面超慢。我的頁面將至少有20個按鈕，如 –

，您應該使用class，然後不是id。 – tech2017

首先，它是不使用相同的IDS很好的做法。

<button id="watchbutton">Watch Trailer &#9658</button>

而當你使用

var btn = document.getElementById("watchbutton");

你只有一個按鈕（第一），你應該使用類似：

<button id="watchbutton" class="watchButton">Watch Trailer &#9658</button> 
<br> 
<button id="watchbutton2" class="watchButton" >Watch Trailer &#9658</button>

並與讓他們：

var buttons = document.getElementsByClassName("watchButton");

來源

2017-06-02 14:03:08

你快到了。

在修復與雙ID的問題 - 由弗裏茨，普拉薩德&別人提到的 - 你仍然需要告訴playVideo播放不同的視頻，這取決於你按哪個按鈕。

這裏是你如何修復您的代碼，以達到預期的效果：

// Get the modal 
 
var modal = document.getElementById('trailerdivbox'); 
 

 
// Get the button that opens the modal 
 
var btn1 = document.getElementById("TDwJDRbSYbw"); 
 
var btn2 = document.getElementById("6H_0aem12_I"); 
 

 
function playVideo(id) { 
 
    var video = document.getElementById('video'); 
 
    var src = video.dataset.src + id; 
 

 
    video.src = src + '?autoplay=1'; 
 
} 
 

 
function resetVideo() { 
 
    var video = document.getElementById('video'); 
 
    var src = video.src.replace('?autoplay=1', ''); 
 

 
    video.src = ''; 
 
    video.src = src; 
 
} 
 

 
// When the user clicks the button, open the modal 
 
btn1.onclick = function(e) { 
 
    modal.style.display = "block"; 
 
    playVideo(this.id); 
 
} 
 

 
btn2.onclick = btn1.onclick; 
 

 
var trailerbox = document.getElementById("close"); 
 

 
trailerbox.onclick = function() { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    resetVideo(); 
 
    } 
 
}

/* Watch Trailer Button CSS */ 
 

 
.btn { 
 
    background-color: #f2f2f2; 
 
    color: red; 
 
    font-weight: 600; 
 
    border: none; 
 
    /* This one removes the border of button */ 
 
    padding: 10px 12px; 
 
} 
 

 
.btn:hover { 
 
    background-color: #e2e2e2; 
 
    cursor: pointer; 
 
} 
 

 
#trailerdivbox { 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    /* Enable Scrolling */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    max-width: 560px; 
 
    max-height: 315px; 
 
    width: 95%; 
 
    height: 95%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<button class="btn" id="TDwJDRbSYbw">Watch Trailer &#9658</button> 
 
<br> 
 
<button class="btn" id="6H_0aem12_I">Watch Trailer &#9658</button> 
 

 
<div id="close"> 
 
    <div id="trailerdivbox"> 
 
<div class="videoWrapper"> 
 
    <iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe> 
 
</div> 
 
    </div> 
 
</div> 
 
<br>

See also this JSFiddle demo

來源

2017-06-02 14:46:37

他們的任何解決方案，而不是在JS中製作多個變量？因爲，我的頁面都會有像20個觀看預告按鈕，我必使使用PHP腳本的20個按鍵，所以我也需要做出20的Javascript，它會使頁面死慢 –

像普拉薩德的解決方案 –

只需添加'<按鈕類= 「BTN」 ID = 「VIDEOID」>觀看預告＆＃9658'+'變種btnX =的document.getElementById（「VIDEOID」）;'+'btnX.onclick = btn1.onclick;'對每個按鈕，其中' VIDEOID'是你的視頻的ID，'X'是你的按鈕的數量。其他的一切都可以被不同的按鈕重用。我可以向你保證它沒有比這更高效...... –

2個具有相同CSS和JS的按鈕不起作用。

回答

相關問題