javascript - 替换屏幕尺寸上的 div id 或 class

Question

我想在屏幕宽度达到一定尺寸时替换一个 div id/class。到目前为止，这就是我所拥有的。

if ( $(window).width() < 750) {  
    $('#floating-control').attr('id','mobilecontrol');
}

然后我阅读使用 class 而不是 id 更好。我改变了一切，所以我有了这个

if ( $(window).width() < 750) {                     
    $('#floating-control').removeClass('floatcontrol').addClass('mobilecontrol');                
} 

到目前为止，这些都不起作用。我愿意接受任何其他建议。 (jquery 或 javascript)

Answer 1

尝试使用这个:

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() < 750) { 

      $('#floating-control').addClass('mobilecontrol');
      $('#floating-control').removeClass('floatcontrol');

      }
    else
    {
        $('#floating-control').removeClass('mobilecontrol');
      $('#floating-control').addClass('floatcontrol');
    }

});

$(window).on('resize', function() {
  var win = $(this);
  if (win.width() < 514) {

    $('#floating-control').addClass('mobilecontrol');
    $('#floating-control').removeClass('floatcontrol');

  } else {
    $('#floating-control').removeClass('mobilecontrol');
    $('#floating-control').addClass('floatcontrol');
  }

});

.floatcontrol {
  background: white;
  color: red;
  font-size: 1.4em;
}
.mobilecontrol {
  background: blue;
  color: white;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floating-control" class="floatcontrol">I am text.</div>