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>

替换屏幕大小上的div id或class

1 个答案: