Cambio de un nombre de clase con jQuery dado un rango ancho específico (consulta de medios)

Question

tengo el siguiente código HTML que estoy tratando de modificar:

<div class="col1 width8"><img src="images/entity.jpg"></div> 

quiero usar preguntas de los medios, pero yo no quiero modifica el CSS, pero reemplaza el nombre de clase de ancho8 a ancho6. Esto no suele ser posible con la consulta de medios estándar por debajo de:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { } 

Deseo utilizar jQuery para eliminar la clase y añadir una clase cuando la ventana está entre 1240 y 1484px de ancho. ¿Puede ayudarme con la alternativa de jquery a las consultas de medios para modificar nombres de clase y de identificación en línea?

Aquí es mi jQuery

$(document).ready(function() { 
    $(window).resize(function(){ 
      var width = $(window).width(); 

      if(width >= 1240 && width <= 1484){ 
       $('#info').removeClass('col9').addClass('col8'); 
      } 
      else if(width >= 1485 && width <= 1788){ 
       $('#info').removeClass('col8').addClass('col7'); 
      } 

      else if(width >= 1789 && width <= 2237){ 
       $('#info').removeClass('col7').addClass('col6'); 
      } 

      else if(width >= 2238 && width <= 3000){ 
       $('#info').removeClass('col7').addClass('col6'); 
      } 
      else{ 
       $('#info').removeClass('col8').addClass('col9'); 
      } 
      }) 

.resize(); 

    }); 

Answer 1

Puede probar esto.

$(window).resize(function(){ 
    console.log('resize called'); 
    var width = $(window).width(); 
    if(width >= 700 && width <= 900){ 
     $('#myelement').removeClass('width8').addClass('width6'); 
    } 
    else{ 
     $('#myelement').removeClass('width6').addClass('width8'); 
    } 
}) 
.resize();//trigger the resize event on page load. 

Answer 2

Usted puede hacer algo como:

var x = $('#myelement'); // this is your element 
var w = $(window).width(); 
if(w >= 700 && w <= 900) { 
    x.removeClass('class-to-remove').addClass('class-to-add'); 
} 

Answer 3

Tome un vistazo a enquire.js

Es una biblioteca sin dependencia que le permite responder a preguntas de los medios con JavaScript.

Por ejemplo:

var $info = $('#info'); 

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", { 
    match: function() { 
     $info.addClass('col8'); 
    }, 

    unmatch: function() { 
     $info.removeClass('col8'); 
    } 
}).listen(); 

A continuación, puede registrarse preguntas de los medios para los diferentes puntos de interrupción en su sitio para que se añadirán las clases y se retiran a persona compatible.