Question

我已经列出了一些标签，onClick那些标签我添加了一个类（.circle-checked），但如果媒体查询少于600px那么我不想添加这个类（{{ 1}}）但另一个类（.circle-checked）。我怎样才能进行这种控制！？

这里是用于知道的代码：

.circle-checked-blue

谢谢

Answer 1

您可以尝试window.matchMedia。

$(window).load(function () {
     $('input').change(function(){
         var $this = $(this), $div = $('label.ui-button.ui-widget.ui-state-default[for=' + $this.attr('id') + ']');
            var classname='circle-checked';
             if (window.matchMedia('(max-width: 600px)').matches) {
                classname='circle-checked-blue';
             } 

            if( $this.is(':checked') )
            {
                $div.addClass(classname);
            }
            else
            {
                $div.removeClass(classname);
            }
        }).change();
});

Answer 2

尝试使用jquery width从窗口获取宽度...

$(window).load(function () {
     $('input').change(function(){
         var $this = $(this), $div = $('label.ui-button.ui-widget.ui-state-default[for=' + $this.attr('id') + ']');

         var issm = $(window).width()=<600;
         var classChecked= issm?'circle-checked-blue':'circle-checked';


            if( $this.is(':checked') )
            {
                $div.addClass(classChecked);
            }
            else
            {
                $div.removeClass(classChecked);
            }
        }).change();
});

如果媒体查询小于600px，如何使用jQuery添加另一个类？

2 个答案: