2个具有相同CSS和JS的按钮无效。

时间：2017-06-02 13:57:55

标签： javascript html css button

见fiddle。这是我的手表拖车按钮，第一个按钮工作完美。但第二个手表预告片按钮无效。

它有什么问题？

这是我的代码：

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>

4 个答案:

答案 0 :(得分：3)

你不能拥有相同的ID。将id更改为其他内容。

google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Task', 'Hours per Day'],
                  ['Work',     1],
                  ['Eat',      1],
                  ['Commute',  1],
                  ['Watch TV', 1],
                  ['Sleep',    1]
                ]);

                var options = {
                    pieSliceBorderColor : 'none',
                    chartArea:{left:5,top:5,width:390,height:390},
                    enableInteractivity:false,
                    pieStartAngle:30,
                    pieHole: 0.6,
                    slices: {
                        0: { color: 'brown', offset: 0.01 },
                        1: { color: 'brown', offset: 0.01  },
                        2: { color: 'brown', offset: 0.01  },
                        3: { color: 'brown', offset: 0.01  },
                        4: { color: 'brown', offset: 0.01  },

                    }
                };

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                options.slices[sliceCount].color = 'transparent';
                chart.draw(data, options);


            }

答案 1 :(得分：2)

尝试使用classname代替id。因为整个html的ID是唯一的。使用querySelectorAll()的选择器

已更新

在按钮的data-src中声明视频的src。然后使用playvideo(this.dataset.src)函数传递参数。

＆＃13;
＆＃13; 
// 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();
  }
}
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你几乎就在那里。

用双重ID修复问题后 - 由Frits提到，prasad＆amp;其他人 - 您仍然需要告诉playVideo播放不同的视频，具体取决于您推送的按钮。

以下是如何修复代码以获得所需结果的方法：

＆＃13;
＆＃13; 
// 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();
  }
}
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

See also this JSFiddle demo

答案 3 :(得分：0)

首先，使用相同的ID不是一个好习惯。

<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");
相关问题
最新问题