Изменение имени класса с помощью jquery для заданного диапазона ширины (медиа-запрос) - PullRequest
Новая
       6

Изменение имени класса с помощью jquery для заданного диапазона ширины (медиа-запрос)

8 голосов
/ 20 января 2012

У меня есть следующий HTML-код, который я пытаюсь изменить: 

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

Я хочу использовать медиа-запросы, но я не хочу изменять css, а вместо этого заменить имя класса с width8 на width6 Обычно это невозможно при стандартном медиа-запросе ниже: 

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

Я хочу использовать jquery для удаления класса и добавления класса, когда окно имеет ширину от 1240 до 1484 пикселей. Можете ли вы помочь мне с jquery альтернативой медиа-запросам для изменения встроенного класса и имен идентификаторов?

Вот мой 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();

    });

Ответы [ 3 ]

16 голосов
/ 20 января 2012

Вы можете попробовать это. 

$(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.
10 голосов
/ 24 октября 2012

Взгляните на enquire.js

Это библиотека без зависимостей, которая позволяет вам отвечать на медиа-запросы с помощью JavaScript.

Например: 

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();

Затем вы можете просто зарегистрировать медиазапросы для различных точек останова на вашем сайте, чтобы при успешном совпадении классы добавлялись и удалялись.

2 голосов
/ 20 января 2012

Вы можете сделать что-то вроде: 

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');
}
...