javascript - 将Javascript函数应用于多个按钮?
问题描述
我正在尝试将 javascript 函数应用于弹出带有描述的视频的多个按钮。一个按钮工作,但另一个按钮不工作。我尝试使用“onclick”并且有一个弹出窗口,但是它显示了第一个按钮的内容。javascript 链接在一个单独的文件“popup.js”中。
HTML:
<div class="container">
<div class="box" id="button">
<a href="#" id="open">HURRICANE TRACK</a>
</div>
<div id="popup">
<h2>HURRICANE TRACKING</h2>
<video src="python_movies/hurricanetrack.mov" controls></video>
<p>
A Python project that prompts the user for a file containing hurricane information in order to form a
dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the
correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind
speed. The program graphs all of the corresponding information by adding the information on a table,
graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind
speed.
</p>
<a href="#" id="close">CLOSE</a>
</div>
<div class="box" id="button">
<a href="#" id="open">NINE MEN'S MORRIS</a>
</div>
<div id="popup">
<h2>NINE MEN'S MORRIS</h2>
<video src="python_movies/ninemensmorris.mov" controls></video>
<p>
A Python Projects that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that
combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four
intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men
lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player
wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to
win), or by leaving them without a legal move. The game proceeds in three phases:
</p>
<ul>
<li>Placing pieces on vacant points</li>
<li>Moving pieces to adjacent points</li>
<li>(optional phase) Moving pieces to any vacant point when the player has been reduced to three men
</li>
</ul>
<a href="#" id="close">CLOSE</a>
</div>
</div>
<script src="js/popup.js"></script>
JavaScript:
function toggle() {
var blur = document.getElementById('button');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
document.querySelector("#open").onclick = toggle;
document.querySelector("#close").onclick = toggle;
解决方案
id在整个文档中必须是唯一的。您可以使用类或不同的属性来选择多个节点。
// listener function
function handle_button_click() {
console.log(this.innerText);
}
// add click events using `class`
const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
button.addEventListener('click', handle_button_click, false);
}
<button class="button">Button 1</button>
<button class="button">Button 2</button>
更新
对于弹出窗口,这将是完美的,
function handle_button_click() {
const popups = document.querySelectorAll('.popup');
const buttons = document.querySelectorAll('.button');
popups.forEach(p => p.classList.remove('open'));
buttons.forEach(b => b.classList.remove('active'));
const popup = document.querySelector(this.dataset.popup);
if (!popup) return;
popup.classList.add('open');
this.classList.add('active');
}
const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
button.addEventListener('click', handle_button_click, false);
}
.popup {
display: none;
}
.open {
display: block;
}
.active {
color: cadetblue;
}
<button class="button" data-popup="#popup1">Button 1</button>
<button class="button" data-popup="#popup2">Button 2</button>
<div class="popup" id="popup1">Popup 1</div>
<div class="popup" id="popup2">Popup 2</div>
推荐阅读
- python - 使用两个连接优化 Django Query
- google-cloud-platform - Cloud Function 有没有办法处理长期运行?
- python - 使用 tensorflow 删除图像的最后一行和最后一列
- d3.js - 在没有 div 的 D3.js 中将 HTML 文本框锚定到 SVG
- .net-core - 所有 .Net Core 控制台输出都写入系统日志?
- pg-promise - Pg-promise - 如何将二进制数据直接流式传输到响应
- r - 如何在 R 中创建查找?
- go - Go Profiling - 错误的文件
- javascript - 获取 datalist 输入的值,使用 v-model 清除 datalist
- ios - 将循环视频同步到自定义音频