javascript - 显示不同的图像 onClick 事件 (JavaScript)
问题描述
所以,我对 JavaScript 没有任何工作知识,但我想知道为什么这对我不起作用。我有 4 个按钮,4 个带有不同图像的不同 div,当单击一个按钮时,我希望图像更改为按钮上显示的类别。
ie Button: "Windows" --Button is clicked--> Show images of windows
按钮“门”--单击按钮--> 显示门的图像
JavaScript 文件被导入 HTML 文档:
<head>
<script type="text/javascript" src="script.js"></script>
</head>
const showChoosenCategory = event => {
const getId = event.id
const links = document.querySelectorAll('.work-category button')
for (i = 0; i < links.length; i++) {
if (links[i].hasAttribute('class')) {
links[i].classList.remove('active')
}
}
event.classList.add('active')
const getCategory = document.querySelector(`.category-${getId}`)
const categories = document.querySelectorAll('div[class ^= "category-"]')
for (i = 0; i < categories.length; i++) {
if (categories[i].hasAttribute('class')) {
categories[i].classList.remove('showCategory')
categories[i].classList.add('hideCategory')
}
}
getCategory.classList.remove('hideCategory')
getCategory.classList.add('showCategory')
}
.hideCategory {
display: none;
}
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" id="windows">Fönster</button>
<button class="category" id="doors">Dörr</button>
<button class="category" id="furniture">Möbler</button>
<button class="category" id="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" class="gallery-image">
</div>
</div>
<div class="category-doors hideCategory">
<div class="imageslist">
<img src="assets/img_door.jpg" class="gallery-image">
</div>
</div>
<div class="category-furniture hideCategory">
<div class="imageslist">
<img src="assets/img_furniture.jpg" class="gallery-image">
</div>
</div>
<div class="category-misc hideCategory">
<div class="imageslist">
<img src="assets/img_misc.jpg" class="gallery-image">
</div>
</div>
</div>
我怎样才能使这项工作?
解决方案
这是一个基于您提供的脚本的小型解决方案。我已经修改/添加了一些属性以简化脚本。逻辑如下:
按钮指示要显示哪个 div
var controls = document.querySelector('.work-category');
var gallery = document.querySelector('.gallery');
controls.addEventListener('click', displayCategory);
function displayCategory(ev) {
var selectedControl = controls.querySelector('.active');
var activeCategory = gallery.querySelector('.showCategory');
// exiting early if the selected control
// is the clicked button
if (ev.target === selectedControl) { return; }
var categoryId = ev.target.dataset.category;
var category = gallery.querySelector('.category-' + categoryId);
ev.target.classList.add('active');
category.classList.add('showCategory');
selectedControl.classList.remove('active');
activeCategory.classList.remove('showCategory');
}
.active {
background: skyblue;
}
.category-windows,
.category-doors,
.category-furniture,
.category-misc {
display: none;
}
.showCategory {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" data-category="windows">Fönster</button>
<button class="category" data-category="doors">Dörr</button>
<button class="category" data-category="furniture">Möbler</button>
<button class="category" data-category="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" alt="window" class="gallery-image">
</div>
</div>
<div class="category-doors">
<div class="imageslist">
<img src="assets/img_door.jpg" alt="door" class="gallery-image">
</div>
</div>
<div class="category-furniture">
<div class="imageslist">
<img src="assets/img_furniture.jpg" alt="furniture" class="gallery-image">
</div>
</div>
<div class="category-misc">
<div class="imageslist">
<img src="assets/img_misc.jpg" alt="misc" class="gallery-image">
</div>
</div>
</div>
</body>
</html>
推荐阅读
- ruby-on-rails - Selenium::WebDriver::Error::UnknownError: Invalid Content-Type
- android - 更改正负按钮和间距的颜色
- spring - 为什么注入 bean 仍然需要更改代码?
- java - 请求被拒绝,因为没有找到多部分边界 java
- javascript - JavaScript, onload="setTimeout('autoClick();',1500);" 后删除点击
- docker - 如果 CMD 是 exec 形式,如何在 compose 文件中运行多个命令?
- arrays - Angular 7 - 标签和日期值
- angularjs - 无法删除角度 js $onDestroy 中的事件处理程序
- javascript - 导航栏在单击菜单按钮时会展开,但不会向后折叠
- html - 带有参数的href链接到不同页面中的书签