Change DIV CSS class with radio buttons

user_8636097 0
Viewed 899

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>

css html jquery javascript
4 Answers

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);
}));
user_47309990
user_58536110

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/

user_48429490

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");
  }
}));
user_32844630
Related