Question

我正在尝试使用JQuery根据屏幕宽度显示两种布局中的一种，并且遇到了一些麻烦。下面的代码是一个初始测试，看看我是否可以将html设置为两个不同的东西之一。我没有收到控制台错误，代码似乎没有任何影响。我对JQuery比较陌生，我所做的一点点练习都是几个月陈旧的。任何人都可以指出我正在做错的方向吗？

 <!DOCTYPE html> <html> <head> 
  <title>Main Window</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
 </head> 
 <body>
 <div id='primary'></div>
 <script>
 if (window.width > 768){
    $('primary').html('Big Window');    
 }
 else{
    $('primary').html('Small Window');
 }
 </script>
 </body> 
 </html>

Answer 1

您需要将代码放入DOM准备好$(document).ready(function() { })或$(function() { })，并且您还缺少#目标元素id名为primary ：

$(document).ready(function() {
    if (window.width > 768){
         $('#primary').html('Big Window');    
    }
    else{
        $('#primary').html('Small Window');
    }

});

Answer 2

您错过了id selector（ID前面的#） - 您正在使用element selector（它正在寻找像<primary></primary这样的元素）

if ($(window).width() > 768){
    $('#primary').html('Big Window');   
} else {
    $('#primary').html('Small Window');   
}

演示：Fiddle（增加/减少结果窗口的宽度并再次运行）

Answer 3

尝试使用

if($(window).width()> 768)

使用JQuery显示两个布局之一

3 个答案: