2016-10-19 23 views
0

我正在使用jquery if else条件与($(window).width()
它工作正常但当窗口宽度改变时,条件是不会自动适用,而我需要重新加载浏览器应用状态。会有什么帮助,当我调整浏览器顺利拿到了CSS媒体查询一样的变化。

jQuery(document).ready(function($) { 
 

 
    if ($(window).width() < 767) { 
 
     $('p').removeClass('blue'); 
 
     $('p').addClass('green'); 
 
    } 
 
    else { 
 
     $('p').addClass('red'); 
 
     $('p').removeClass('blue'); 
 
    } 
 
    
 

 
});
.red { 
 
    color: red; 
 
} 
 

 
.green { 
 
    color: green 
 
} 
 

 
.blue { 
 
    color: blue 
 
}
<p class="blue">Hello World</p> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Fiddle

+1

你调用它的文件准备好。如果你想检查每个调整大小,然后使用'窗口'调整大小的事件...无论如何,检查'窗口'宽度以获取视口宽度是不好的做法,改为使用[window.matchMedia()](https://开发人员.mozilla.org/EN-US /文档/网络/ API /窗/ matchMedia)。遐,你可以只使用CSS媒体查询... –

回答

0

试试下面的代码

jQuery(document).ready(function() { 
    Responsive(); 
}); 

$(window).resize(function() { 
    Responsive(); 
}); 

function Responsive(){ 
    if ($(window).width() < 767) { 
     $('p').removeClass('blue'); 
     $('p').addClass('green'); 
    } 
    else { 
     $('p').addClass('red'); 
     $('p').removeClass('blue'); 
    } 
} 
+0

这段代码似乎只工作一次,只有一种方式。可能是我正在寻找不同的东西。 :) –

+0

窗口宽度更改时响应函数调用。控制addClass和removeClass函数。 $('p')。removeClass('blue')每次运行。所以,当窗口宽度改变时,P颜色保持不变。 @SalimHossain – selami

相关问题