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的按钮不起作用。

回答

相关问题