我知道有很多类似的问题,但没有一个对我有帮助,所以我来了。 我有一个 9 按钮网格,如果我点击一个它会改变颜色(橙色),但如果我点击另一个,它们都会保持橙色。我不要。我希望如果一个按钮已经是橙色的,那么新的按钮会被着色,但第一个会恢复正常颜色。我尝试了很多方法,但我不太擅长 js 和 HTML,所以我不明白问题出在哪里
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"angular2-notifications": "^9.0.0",
"bootstrap": "3.3.7",
"bootstrap-datepicker": "1.6.4",
"bootstrap-select": "1.11.2",
"core-js": "^2.5.4",
"jquery": "^3.6.0",
"ng2-file-upload": "1.1.4-2",
"ng2-table": "^1.3.2",
"popper.js": "^1.16.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.10",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/ace": "0.0.35",
"@types/bootstrap": "3.3.33",
"@types/bootstrap-datepicker": "0.0.6",
"@types/bootstrap-select": "1.11.0",
"@types/core-js": "^2.5.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.5",
"@types/lodash": "^4.14.168",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
apiVersion: v1
kind: PersistentVolume
metadata:
name: mongodb-data-volume
labels:
app: moderetic
type: mongodb
role: data
spec:
storageClassName: hcloud-volumes
capacity:
storage: 10Gi
accessModes:
- ReadWriteOnce
csi:
volumeHandle: "11099996"
driver: csi.hetzner.cloud
fsType: ext4
---
---
apiVersion: mongodbcommunity.mongodb.com/v1
kind: MongoDBCommunity
metadata:
name: system-mongodb
labels:
app: moderetic
type: mongodb
spec:
members: 1
type: ReplicaSet
version: "4.2.6"
logLevel: INFO
security:
authentication:
modes: ["SCRAM"]
users:
- name: moderetic
db: moderetic
passwordSecretRef:
name: mongodb-secret
roles:
- name: clusterAdmin
db: moderetic
- name: userAdminAnyDatabase
db: moderetic
scramCredentialsSecretName: moderetic-scram-secret
additionalMongodConfig:
storage.wiredTiger.engineConfig.journalCompressor: zlib
persistent: true
statefulSet:
spec:
template:
spec:
containers:
- name: mongod
resources:
requests:
cpu: 1
memory: 1Gi
limits:
memory: 8Gi
- name: mongodb-agent
resources:
requests:
memory: 50Mi
limits:
cpu: 500m
memory: 256Mi
volumeClaimTemplates:
- metadata:
name: data-volume
spec:
accessModes: ["ReadWriteOnce"]
storageClassName: hcloud-volumes
resources:
requests:
storage: 10Gi
selector:
matchLabels:
app: moderetic
type: mongodb
role: data
- metadata:
name: logs-volume
spec:
accessModes: ["ReadWriteOnce"]
storageClassName: hcloud-volumes
resources:
requests:
storage: 10Gi
selector:
matchLabels:
app: moderetic
type: mongodb
role: logs
@Override
public void rollback(Database database) throws CustomChangeException {
JdbcConnection connection = (JdbcConnection) database.getConnection();
try {
connection.setAutoCommit(false);
ResultSet rs = getTables(connection);
//if the user chose to use a suffix
if (this.getSuffix() != null) {
while (rs.next()) {
String tableName = rs.getString(3);
if (tableName.endsWith(this.getSuffix())) {
if (!checkColumnsExists(connection, tableName, newName)) {
throw new CustomChangeException("The column " + newName + " doesn't exist in the table " + tableName + " anymore.Please fix this");
}
PreparedStatement s = connection.prepareStatement(getRollbackQuery(tableName));
s.executeUpdate();
logger.info("Column name reversed to " + this.getColumnName() + " in table" + tableName);
}
}
}
//if the user chose to use a regex
if (this.getRegex() != null) {
Pattern pattern = Pattern.compile(this.getRegex());
while (rs.next()) {
String tableName = rs.getString(3);
Matcher matcher = pattern.matcher(tableName);
boolean matches = matcher.matches();
if (matches) {
if (!checkColumnsExists(connection, tableName, newName)) {
logger.error("The column " + newName + " doesn't exist in the table " + tableName + " anymore.Please fix this");
throw new CustomChangeException();
}
PreparedStatement s = connection.prepareStatement(getRollbackQuery(tableName));
s.executeUpdate();
logger.info("Column name reversed to " + this.getColumnName() + " in table" + tableName);
}
}
}
connection.commit();
} catch (SQLException | DatabaseException | DifferentDataTypeException e) {
logger.error(e.getMessage());
throw new CustomChangeException();
}
}
只是为了让大家知道,我试图在 js 中解决这个问题的函数只是在第一个按钮(ID sel)上,我已经尝试告诉代码用未着色的类替换有色类。 我也知道它看起来很奇怪,因为我使用了 2 种不同的方法来创建变量,但是我发现我在堆栈溢出时使用的所有其他函数都是这样写的(我只是更改了 ID 名称)但我不知道然后我如何添加其他变量存在差异。
答案 0 :(得分:1)
您可以使用以下步骤轻松实现这一点
首先,删除 javascript 中有关 click
侦听器的所有代码。
然后,使用这个存储按钮列表
var buttons = document.querySelectorAll('.bottoneCategoria');
然后,添加这个函数。基本上,只要您点击其中一个按钮,就会调用此函数。
function onButtonClick(event) {
// Get the button on which user clicked using event.target
let clickedButton = event.target;
// Loop over all your buttons and replace the btn2 with btn
// This means all buttons will now be normal
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.replace('btn2', 'btn');
}
// Finally change your clicked button from btn to btn2
// This will make your clicked button to orange while rest will be normall
clickedButton.classList.replace('btn', 'btn2');
}
最后,遍历所有按钮并将您在上一步中创建的函数附加到所有按钮。
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', onButtonClick);
}
检查工作代码片段以了解更多详细信息。
function hide() {
var x = document.getElementById("demo");
var y = document.getElementById("demo2")
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
function hide2() {
var x = document.getElementById("demo2");
var y = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
var buttons = document.querySelectorAll('.bottoneCategoria');
function onButtonClick(event) {
let clickedButton = event.target;
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.replace('btn2', 'btn');
}
clickedButton.classList.replace('btn', 'btn2');
}
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', onButtonClick);
}
body {
font-family: "Open Sans", sans-serif;
background-color: white;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2 {
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Normalize.css">
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="container justify flex-row">
<div class="flex-col">
<div class="justify flex-row">
<h1 class="intro">Vuoi conoscere quali potrebbero <br> essere i <strong>costi</strong> della attività di <span class="orange">logistica</span> e <br>
<span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br> Gruppo Sinergia?</h1>
</div>
<div class="justify flex-row">
<h2 class="orange">Calcola il tuo preventivo!</h2>
</div>
<div class="justify flex-row">
<h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br> dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
</div>
<div class="justify flex-row">
<h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br> struttura di Gruppo Sinergia.</h3>
</div>
<!--^tariffe^-->
<div class="justify flex-row">
<p class="tabtitle">TIPOLOGIA PRODOTTO</p>
</div>
<!--Parte di codice con button-->
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div class="justify flex-row">
<p class="tabtitle">DIMENSIONI PRODOTTO</p>
</div>
<div class="flex-row justify evenly">
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide()">Standard</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide2()">Fuori misura</button>
</div>
</div>
</div>
<div id="demo2" class="justify m-30 evenly bg flex-row hide">
<div class="flex-col">
<div class="flex-row">
<p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
</div>
<div class="flex-row justify evenly">
<input class="small info2" type="text" placeholder="lunghezza">
<input class="small info2" type="text" placeholder="larghezza">
<input class="small info2" type="text" placeholder="altezza">
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti justify flex-row">
<div class="flex-col">
<p>€ <span class="white">4,56</span></p>
</div>
<div class="flex-col">
<p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col align">
<div class="flex-row">
<p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
<div class="flex-row justify intro">
<p class="tariffe">
I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br> Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br> Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br> di prodotti, contattaci!
</p>
</div>
<div class="justify flex-row bg">
<div class="flex-col">
<div class="flex-row">
<p>Nome e Cognome</p>
</div>
<div class="flex-row">
<p>E-mail</p>
</div>
<div class="flex-row">
<p>Telefono</p>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
</div>
</div>
<div class="flex-row m-7 justify">
<button class="richiedi">
Richiedi un preventivo
</button>
</div>
</div>
</div>
<script>
</script>
</body>
</html>