正如标题所述，我想在锚标记中添加一个类，即.show，例如，该类等于.image_category。 CNC_加工。
（请参阅来自数据库的DevTools AND / OR PHP行中的HTML）
当用户单击活动元素时，按钮元素将接收该活动类。
这是可过滤图片库的一部分。图像从数据库加载并通过PHP在浏览器中显示。这意味着图像已经可用，仅是显示图像或使用众所周知的display: none; / display: block隐藏它们；属性。
我相信我一定在某个地方的代码中出错了，因为据我所知，我遵循了其他人的指示。
我们将不胜感激。
请查看下面的相关代码。到目前为止，我只编写了包括对活动CNC_Machining进行检查以降低复杂性的代码。
编辑： 我还添加了将ACTIVE分配给所单击按钮的代码。首先我不太愿意，因为我认为它使分析变得太复杂了，但是也许会有助于解决问题。
要使其更加明显：
这是devTools中HTML的图像： DevTool Image
将“活动”类分配给单击按钮的JS代码：
// The button which would be used to add 'active' class to
// all the buttons.
let allButton = document.querySelector('#All');
let btns = Array.from(document.querySelectorAll('.category-button'));
let activeButton = null;
const handleClick = (e) => {
e.preventDefault();
e.currentTarget.classList.add('active');
// Checks that the activeButton is defined (initially it's null).
// Also checks that the button that was clicked is not the button which is
// already active to avoid removing the active class on double click.
if (activeButton != null && activeButton != e.currentTarget) {
activeButton.classList.remove('active');
}
activeButton = e.currentTarget;
}
btns.forEach(node => {
node.addEventListener('click', handleClick)
});
// Listen to a click event from the "allButton" and when it's clicked,
// loop through the buttons array and add 'active' class to all buttons
// in it.
allButton.addEventListener('click', function() {
btns.forEach(btn => {
btn.classList.add('active');
})
});
let category_btn = category_btns.getElementsByClassName('category-');
category_btn.addEventListener("click", function() {
addClassShow(category_btn)
});
分配展示类的JS代码：
let category_btns = document.getElementById('category-buttons');
let category_btn = category_btns.getElementsByClassName('category-button');
// if the CNC_Machining button is "active" give anchor tags with .CNC_Machining classes the CSS .show atttribute.
let category_btn = getElementsByClassName('category-button');
let CNC_Mach_btn = document.getElementById("CNC_Machining_button");
let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");
CNC_Mach_btn.addEventListener("click", function() {
// if the the CNC_Machining button is active make classes with Images with CNC_Machining active.
if (CNC_Mach_btn.classList.contains("active")) {
CNC_Machining_Class_In_AnchorTag.classList.add("show");
}
});
CSS：
#category-buttons {
float: left;
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 12.5%;
margin: 10vh 10px;
}
.category-button {
padding: 20px;
margin: 2px 0;
color: white;
background: rgb(153, 124, 124);
}
.product-gallery-title {
text-transform: uppercase;
}
.wrapper {
text-align: center;
width: 65%;
margin: auto;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 13px;
margin: auto;
width: 100%;
background: rgb(236, 236, 236);
justify-content: center;
}
.images {
display: none;
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
text-decoration: none;
}
.show {
display: block;
}
代码编辑器中的HTML和PHP代码：
<div id="category-buttons">
<h5>Choose image category</h5>
<button id="All" class="category-button active" >All Categories</button>
<button id="CNC_Machining_button" class="category-button CNC_Mach_btn">CNC_Machining</button>
<button id="HP_Die_Casting_button" class="category-button HP_Die_btn">HP Die Casting</button>
<button id="Iron_Casting" class="category-button">Iron Casting</button>
<button id="Steel_Casting" class="category-button">Steel Casting</button>
<button id="Precision_Casting" class="category-button">Precision Casting</button>
<button id="Aluminium_Casting" class="category-button">Aluminum Casting</button>
</div>
<section class="gallery-links">
<div class="wrapper">
<h2 class="product-gallery-title">Product Gallery</h2>
<div class="gallery-container">
<?php
include_once 'includes/dbh.inc.php';
$sql = 'SELECT * FROM gallery ORDER BY orderGallery DESC';
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt,$sql)) {
echo 'SQL statement failed!';
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
//what's echoed out by the database
echo ' <a class="images '.$row["image_category"].'" style="background-repeat:no-repeat; background-image: url(gallery/'.$row["imgFullNameGallery"].')">
<div class="color-overlay">
<h3>'.$row["titleGallery"].'</h3>
<p>'.$row["descGallery"].'</p>
</div>
</a>';
}
}
?>
</div>
</div>
<?php
if (isset($_SESSION['username'])) {
echo '<div class="gallery-upload">
<h3>Please fill in the text fields, select the image and upload to gallery by clicking upload.</h3>
<form action="includes/gallery-upload.inc.php" method="post" enctype="multipart/form-data">
<input type="text" name="filename" placeholder="File name...">
<input type="text" name="fileTitle" placeholder="Image title...">
<input type="text" name="fileDescription" placeholder="Image Description...">
<input type="text" name="category" placeholder="Category....">
<input type="file" name="imageFile" >
<br>
<br>
<button class="gallery-submit-btn" type="submit" name="submit">UPLOAD</button>
</form>
</div>';
}
?>
</section>
浏览器DEV_Tools的HTML输出：
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="galleryTest.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="/trexatex/trexatek_V4.php">
<img class="brand-logo" src="../images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse text-uppercase" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="../trexatek_V4.php">Home</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="../manufacturing.html">Manufacturing</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="/trexatex/PHPGallery/GalleryInPHP.php">Gallery</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">About</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Contact</a></li>
</ul>
</div>
</nav>
<div id="category-buttons">
<h5>Choose image category</h5>
<button id="All" class="category-button active">All Categories</button>
<button id="CNC_Machining_button" class="category-button active">CNC_Machining</button>
<button id="HP_Die_Casting_button" class="category-button">HP Die Casting</button>
<button id="Iron_Casting" class="category-button">Iron Casting</button>
<button id="Steel_Casting" class="category-button">Steel Casting</button>
<button id="Precision_Casting" class="category-button active">Precision Casting</button>
<button id="Aluminium_Casting" class="category-button">Aluminum Casting</button>
</div>
<section class="gallery-links">
<div class="wrapper">
<h2 class="product-gallery-title">Product Gallery</h2>
</div>
</section>
<div class="login-container">
<p>Login area</p>
<form class="login-form" action="../Login-System/login_user.php" method="POST">
<input class="login" type="text" name="userName" placeholder="username">
<br>
<input class="login" type="text" name="userPassword" placeholder="password">
<br> <br>
<button class="login-button" type="submit" name="submit_usrName_and_psw">Sign in</button>
</form>
<br>
<h3>You currently logged out!</h3> </div>
</body><div class="gallery-container">
<a class="images " style="background-repeat:no-repeat; background-image: url(gallery/asf.UNIQid5c3f6d21e13ba8.48416291.jpg)">
<div class="color-overlay">
<h3>asf</h3>
<p>asdf</p>
</div>
</a> <a class="images " style="background-repeat:no-repeat; background-image: url(gallery/1234.UNIQid5c3f6d0fe3b117.37260531.jpg)">
<div class="color-overlay">
<h3>wqer</h3>
<p>qwer</p>
</div>
</a> <script src="jsCode.js"></script><a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/castingwork.UNIQid5c3769cc010891.70586628.jpg)">
<div class="color-overlay">
<h3>Caster at work</h3>
<p>Image of one of our workers casting</p>
</div>
</a> <a class="images HP_Die_Casting" style="background-repeat:no-repeat; background-image: url(gallery/cast_pulley.UNIQid5c3723915a1120.39380036.jpg)">
<div class="color-overlay">
<h3>Precision Molding</h3>
<p>Cast Pulley made by PM</p>
</div>
</a><a class="images CNC_Machinery" style="background-repeat:no-repeat; background-image: url(gallery/steelcastminiturbine.UNIQid5c372f45d3fba6.30267243.jpg)">
<div class="color-overlay">
<h3>MiniTurbine</h3>
<p>MiniTurbine from SteelCasting</p>
</div>
</a> <a class="images CNC_Machinery" style="background-repeat:no-repeat; background-image: url(gallery/galvanized_cast_iron.UNIQid5c3720c4502f92.46784406.jpg)">
<div class="color-overlay">
<h3>Galvanized_Cast_Iron</h3>
<p>Image of connector manufactured in Galvanized_Cast_Iron_Way</p>
</div>
</a> <a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/pizza-pie.UNIQid5c372f19564787.51280655.jpg)">
<div class="color-overlay">
<h3>Cool pic</h3>
<p>When workers work</p>
</div>
</a> <a class="images Sand_Casting" style="background-repeat:no-repeat; background-image: url(gallery/greensandmoulding.UNIQid5c372eec267ff2.76912593.jpg)">
<div class="color-overlay">
<h3>Green Sand Molding</h3>
<p>Casting process for Green Sand Molding</p>
</div>
</a>
</div></html>