Question

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

＆＃13;

$("#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');
  }
}));

＆＃13;

    #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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

您需要使用removeClass和addClass。请勿使用removeAttr()。

此外，您可以将代码简化为2行。

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

Answer 2

您没有删除刚刚添加它们的上一课程。使用.removeAttr()

更改.removeClass()

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

Answer 3

尝试使用removeClass()方法重置您的课程。 removeAttr()用于删除特定属性，例如documentation中指定的onclick处理程序或标题。

使用removeClass()可以有效地重置#over上的类。在这里工作小提琴：https://jsfiddle.net/yzg7j8xz/

Answer 4

我假设您可能正在使用.removeAttr，因为.removeClass在jQuery的几个版本中有点错误。

不是删除class属性，而是使用.attr()来设置class属性：

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

使用单选按钮更改DIV CSS类

4 个答案: