i am just trying change background-color on click on button(input on real website)... but its working only once... i need remove class every time when i clicked on other button and repeat function again...but element still have last added class

thanks a lot for any advice

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I think you can check documention about toggle. That will help you