html css js 按钮 onclick 删除和添加类

Question

我知道有很多类似的问题，但没有一个对我有帮助，所以我来了。 我有一个 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 名称）但我不知道然后我如何添加其他变量存在差异。

Answer 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>