1

I will try to explain what I want to do. How to switch between multiple classes if the classes are more than 2? When I click on the colored buttons, then container color class will added/exchanged. When I click on the white button, then it removes container color class.

Here is an JSFiddle example for a better understanding: https://jsfiddle.net/bwd86h4e/1/

I hope somebody can help. Thanks.

HTML:

<div class="buttons">
  <div class="btn btn-reset"></div>
  <div class="btn btn-red"></div>
  <div class="btn btn-green"></div>
  <div class="btn btn-yellow"></div>
</div>

<div class="container">
  When I click on the colored buttons above, then container color class will exchanged. When I click on the white button, then it removes container color class. How to do it?
</div>

CSS:

/* Buttons */
.btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 3px;
  cursor: pointer;
  border: 2px solid #333;
}
.btn.btn-red { background-color: red; }
.btn.btn-green { background-color: green; }
.btn.btn-yellow { background-color: yellow; }

/* Container */
.container {
  max-width: 480px;
  margin-top: 20px;
  padding: 40px;
  border: 2px solid #333;
}

/* Container color classes */
.container.cont-red { background-color: red; }
.container.cont-green { background-color: green; }
.container.cont-yellow { background-color: yellow; }
mrWilson
  • 91
  • 1
  • 2
  • 13

4 Answers4

5

You use jQuery:

$('.btn').click(function()
{
    var color = $(this).attr('data-class');
    //check to see if el has class btn-reset
    if ($(this).hasClass('btn-reset')) {
        $('.container').attr('class', 'container')
    } else {
        $('.container').attr('class', 'container cont-'+ class)
    }
})

and your html changes to:

<div class="buttons">
  <div class="btn btn-reset" data-class="reset"></div>
  <div class="btn btn-red" data-class="red"></div>
  <div class="btn btn-green" data-class="green"></div>
  <div class="btn btn-yellow" data-class="yellow"></div>
</div>

refs:

https://api.jquery.com/attr/

https://api.jquery.com/addClass/

https://api.jquery.com/hasClass/

jsFiddle: https://jsfiddle.net/fkopmjyx/

treyBake
  • 6,440
  • 6
  • 26
  • 57
  • Sorry @ThisGuyHasTwoThumbs, but your code does not work: https://jsfiddle.net/mn1sLwpr/ – mrWilson Jul 05 '18 at 14:04
  • @mrWilson check fiddle – treyBake Jul 05 '18 at 14:14
  • Sorry, my mistake. But now your code removes custom classes as well. That's not what I want. :( – mrWilson Jul 05 '18 at 14:18
  • @mrWilson `When I click on the colored buttons above, then container color class will exchanged. When I click on the white button, then it removes container color class. How to do it?` was your comment - that's what my code does? I'm confused? – treyBake Jul 05 '18 at 14:20
  • @mrWilson my code still does this? you need to always exchange the classes, never add - one will overwrite the other and whichever is last to be declared in your css file wins - which would cause unexpected behaviour – treyBake Jul 05 '18 at 14:27
3

pure javascript like this:

var buttons = document.querySelectorAll(".btn");
var container = document.getElementById("container_1");
var container_color_classes = ["cont-red","cont-green","cont-yellow"];

buttons.forEach(function(button){
  button.addEventListener("click", function(){
   container_color_classes.forEach(function(color){
     container.classList.remove(color);
    })
    var className = this.getAttribute("data-class");
    if(className !== null)
     container.classList.add(className);
  });
});
/* Buttons */
.btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 3px;
  cursor: pointer;
  border: 2px solid #333;
}
.btn.btn-red { background-color: red; }
.btn.btn-green { background-color: green; }
.btn.btn-yellow { background-color: yellow; }

/* Container */
.container {
  max-width: 480px;
  margin-top: 20px;
  padding: 40px;
  border: 2px solid #333;
}

/* Container color classes */
.container.cont-red { background-color: red; }
.container.cont-green { background-color: green; }
.container.cont-yellow { background-color: yellow; }
<div class="buttons">
  <div class="btn btn-reset"></div>
  <div class="btn btn-red" data-class="cont-red"></div>
  <div class="btn btn-green" data-class="cont-green"></div>
  <div class="btn btn-yellow" data-class="cont-yellow"></div>
</div>

<div class="container" id="container_1">
  When I click on the colored buttons, then container color class will added/exchanged. When I click on the white button, then it removes container color class. <strong>How to do it?</strong>
</div>
Emre HIZLI
  • 513
  • 6
  • 14
  • Thanks @Emre HIZLI, but your code removes custom classes as well. That's not what I want. :( https://jsfiddle.net/bwd86h4e/82/ – mrWilson Jul 05 '18 at 14:36
  • @mrWilson check my answer now. i edited for your comment. – Emre HIZLI Jul 05 '18 at 14:52
  • @mrWilson sorry for this. i updated again. check this https://jsfiddle.net/bwd86h4e/94/ – Emre HIZLI Jul 05 '18 at 16:03
  • It works now. It is awesome. :) Thank you @Emre HIZLI Is it possible to do the same thing with localStorage? – mrWilson Jul 05 '18 at 16:28
  • @mrWilson yes it is possible. how can i help you? – Emre HIZLI Jul 05 '18 at 16:28
  • I think it would be great if after refreshing the page it remember the color class. :) – mrWilson Jul 05 '18 at 16:33
  • @mrWilson check this https://jsfiddle.net/bwd86h4e/96/ :) change color and try click run many times or refresh page – Emre HIZLI Jul 05 '18 at 16:40
  • Almost works. When I click on the colored buttons, everything seems to be fine. But when I click on the white button, it does not remember it. :( – mrWilson Jul 05 '18 at 16:47
  • @mrWilson oh sorry i forgot that. now check this https://jsfiddle.net/bwd86h4e/97/ – Emre HIZLI Jul 05 '18 at 16:49
  • You are my hero! :) Everything seems to work now. Thank you very much. If I have any questions later, can I ask here? – mrWilson Jul 05 '18 at 16:58
  • Hi, @Emre HIZLI. Is it possible to add an "append()" function to an existing code? For example: when I click on the red button then it adds to page . When I click on the green button then it replace it with and when I click on the yellow button then it replace it with . But when I click on the white button then it removes . – mrWilson Jul 09 '18 at 17:38
  • @mrWilson yes it is possible. check out this https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript – Emre HIZLI Jul 10 '18 at 04:56
  • Thank you for the link, @Emre HIZLI. Unfortunately, it did not help me. I know how to add a stand alone in to the page , but I do not know how to put it to work with your code in the way I described earlier. :( – mrWilson Jul 10 '18 at 12:01
0

You could use add class in order to toggle the classes

let container = $('.container');

$('.btn').click(function(){
  container.attr('class', 'container');
  if($(this).hasClass('btn-red')) container.addClass('cont-red');
  else if($(this).hasClass('btn-green')) container.addClass('cont-green');
  else if($(this).hasClass('btn-yellow')) container.addClass('cont-yellow');
});

https://jsfiddle.net/RACCH/0uwzgf9x/

Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
  • Thanks @Renzo Calla, but if the container also contains other classes then your code will remove them. That's not good. https://jsfiddle.net/0uwzgf9x/9/ – mrWilson Jul 05 '18 at 13:42
0

If you want you can use JQuery like this:

<div class="container change-color">
    When I click on the colored buttons above, then container color class 
    will exchanged. When I click on the white button, then it removes 
    container color class. How to do it?
</div>

$('.change-color').click(function(){
    var theColorIs = $(this).css("background-color");
    $('.container').css('background-color', theColorIs);
});
Mihai Danet
  • 1
  • 1