Change DIV CSS class with radio buttons

Question

I've been trying to change the CSS class based on radio buttons and it does work, however it will only run once. E.g. If I select the white radio button then select oak, selecting white does nothing until a page refresh. I'm most certainly doing something wrong and any help would be appreciated.

$("#radio").on('change','input[type=radio]', (function() { 
  if($("#oakradio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('oak');
  }
  else if($("#whiteradio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('white');
  }
  else if($("#mocharadio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('mocha');
  }
}));

    #over.mocha {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_mocha.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }

    iframe {
      height: 333px;
      width: 1000px;
      position: absolute;
      top: 93px;
      left: 93px;
    }

    #over.white {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_white.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }

    #over.oak {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_oak.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="over" class="mocha">
  <iframe src="http://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/photo71000333.png"></iframe>
</div>
<form id="radio">
  <input type="radio" name="color" value="white" id="whiteradio">White<br>
  <input type="radio" name="color" value="oak" id="oakradio">Oak<br>
  <input type="radio" name="color" value="mocha" id="mocharadio">Mocha<br>
</form>

gre_gor · Accepted Answer · 2017-09-19 19:39:02Z

5

You need to use removeClass and addClass. Don't use removeAttr().

Also, you can simplify your code to 2 lines only.

$("#radio").on('change','input[type=radio]',(function() { 
  var color = $(this).val();
  $('#over').removeClass("white mocha oak").addClass(color);
}));

edited Sep 19, 2017 at 19:39

gre_gor

6,65712 gold badges104 silver badges105 bronze badges

answered Sep 19, 2017 at 19:11

No one

1,1401 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Cho Over a year ago

This is a superior answer.

DobromirM · Accepted Answer · 2017-09-19 20:29:09Z

3

You are not removing the previous class you are just adding them. Change your .removeAttr() with .removeClass()

JSFiddle: https://jsfiddle.net/8f2bru0k/1/

edited Sep 19, 2017 at 20:29

answered Sep 19, 2017 at 18:57

DobromirM

2,0272 gold badges23 silver badges31 bronze badges

Comments

Joseph Cho · Accepted Answer · 2017-09-19 18:58:38Z

2

Try using the removeClass() method instead to reset your classes. removeAttr() is used to remove specific attributes such as onclick handlers or titles as specified in the documentation.

By using removeClass() you effectively reset the classes on #over. Working fiddle here: https://jsfiddle.net/yzg7j8xz/

answered Sep 19, 2017 at 18:58

Joseph Cho

4,2444 gold badges29 silver badges36 bronze badges

Comments

Ikhlak S. · Accepted Answer · 2017-09-19 19:33:06Z

0

I assume you might be using .removeAttr since .removeClass is a bit buggy in a few versions of jQuery.

Instead of removing the class attribute, just set class attribute using .attr()instead:

$("#radio").on('change','input[type=radio]',(function() { 
  if($("#oakradio").is(":checked")){
    $("#over").attr("class", "oak");
  }
  else if($("#whiteradio").is(":checked")){
     $("#over").attr("class", "white");
  }
  else if($("#mocharadio").is(":checked")){
    $("#over").attr("class", "mocha");
  }
}));

answered Sep 19, 2017 at 19:33

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

Collectives™ on Stack Overflow

Change DIV CSS class with radio buttons

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related