jQueryaddClass/removeClass多次

我只是想在點擊按鈕時更改背景顏色（在真實網站上輸入）...但它只作業一次...我每次點擊其他按鈕時都需要洗掉類并再次重復功能...但是元素還有最后添加的課程

非常感謝您的任何建議

jQuery(document).ready(function() {

  jQuery(".btn input[value='black']").click(function() {
    if (jQuery("div.box").hasClass("silver, white")) {
      jQuery("div.box").removeClass("silver, white");
    } else {
      jQuery("div.box").addClass("black");
    }

  });

  jQuery(".btn input[value='silver']").click(function() {
    if (jQuery("div.box").hasClass("black, white")) {
      jQuery("div.box").removeClass("black, white");
    } else {
      jQuery("div.box").addClass("silver");
    }

  });

  jQuery(".btn input[value='white']").click(function() {
    if (jQuery("div.box").hasClass("black, silver")) {
      jQuery("div.box").removeClass("black, silver");
    } else {
      jQuery("div.box").addClass("white");
    }

  });

});

.box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}
div {
  margin: 20px 10px;
}
.btn-container {
  display: flex;
}
.btn {
  border: 2px solid black;
  padding: 10px 15px;
  cursor: pointer;
}
.black {
  background-color: #000;
}
.silver {
  background-color: silver;
}
.white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div>
  <div class="box"></div>
  <div class="btn-container">
    <div class="btn"><input value="black">black</div>
    <div class="btn"><input value="silver">silver</div>
    <div class="btn"><input value="white">white</div>
    </div>
</div>

uj5u.com熱心網友回復：

jQuery(document).ready(function() {

  jQuery(".btn input[value='black']").click(function() {
      jQuery("div.box").removeClass("silver white red");
      jQuery("div.box").addClass("black");
  });

  jQuery(".btn input[value='silver']").click(function() {
      jQuery("div.box").removeClass("black white red");
      jQuery("div.box").addClass("silver");
  });

  jQuery(".btn input[value='white']").click(function() {
      jQuery("div.box").removeClass("black silver red");
      jQuery("div.box").addClass("white");
  });
  
    jQuery(".btn input[value='red']").click(function() {
      jQuery("div.box").removeClass("black silver white");
      jQuery("div.box").addClass("red");
  });

});

.box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}
div {
  margin: 20px 10px;
}
.btn-container {
  display: flex;
}
.btn {
  border: 2px solid black;
  padding: 10px 15px;
  cursor: pointer;
}
.black {
  background-color: #000;
}
.silver {
  background-color: silver;
}
.white {
  background-color: white;
}
.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div>
  <div class="box"></div>
  <div class="btn-container">
    <div class="btn"><input value="black">black</div>
    <div class="btn"><input value="silver">silver</div>
    <div class="btn"><input value="white">white</div>
    <div class="btn"><input value="red">red</div>
    </div>
</div>

uj5u.com熱心網友回復：

我認為您可以查看有關toggle 的檔案。那會幫助你

標籤：查询 css

上一篇：如何對修改發送的訊息的net.Conn函式進行單元測驗？

下一篇：如何使函式選擇并在新添加的元素上執行？