使用单选按钮更改DIV CSS类

Question

我一直在尝试根据单选按钮更改CSS类,它确实有效,但它只会运行一次.例如,如果我选择白色单选按钮然后选择橡木,选择白色不会做任何事情,直到页面刷新.我肯定做错了什么,任何帮助都会受到赞赏.

$("#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>

Answer 1

你需要使用removeClass和addClass.不要用removeAttr().

此外,您可以将代码简化为2行.

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