Question

我看起来很好看但却找不到我想要的东西。

我有一个var dsize = 6的起始变量，并希望此值在resize上的各种浏览器宽度之间更改。对于你知道的所有响应的东西。

我面临的问题是我只想更新var而不是更新后面的代码块。

$(window).on('load resize',function (){
var dsize = 6;
var wrapper = $('.clients-spec');
var ul;
if ($(window).width() >= 1200) {
    var dsize = 6;
}
if ($(window).width() < 1200) {
    var dsize = 5;
}
if ($(window).width() < 1000) {
    var dsize = 4;
}
if ($(window).width() < 800) {
    var dsize = 3;
}
if ($(window).width() < 600) {
    var dsize = 2;
}...code...});

http://jsfiddle.net/k7Wrn/

如果这比我制作简单得多，或者多次被问到，请向我指出正确的方向，我深表歉意。

干杯。

Answer 1

您可以根据浏览器宽度

简单地使用在调整大小时返回dsize的函数

$(function (){

    function get_dsize(elem)
    {
         var dsize=0;

         if (elem.width() >= 1200) dsize = "6";           
         if (elem.width() < 1200)  dsize = "5";          
         if (elem.width() < 1000)  dsize = "4";
         if (elem.width() < 800)   dsize = "3";
         if (elem.width() < 600)   dsize = "2";

        return dsize;
   }

     $(window).on("resize", function() {
       var size = get_dsize($(this));
        $('p').html(size);
    });

});

如果您正在寻找响应能力，可以通过CSS media-queries实现：例如：

@media screen and (max-width: max_width) and (min-width: min_width)
    {
        .yourclassname{
            //css
        }

    }

Answer 2

要修复代码，请注册resize事件处理程序。此外，您只需在顶部指定dsize作为变量，您可以在此之后保留var关键字。

无论如何，这是一个固定的小提琴：http://jsfiddle.net/k7Wrn/1/

代码：

$(function (){
    var dsize = "6";
    $(window).on("resize", function() {
        if ($(this).width() >= 1200) {
            dsize = "6";
        }
        if ($(this).width() < 1200) {
            dsize = "5";
        }
        if ($(this).width() < 1000) {
            dsize = "4";
        }
        if ($(this).width() < 800) {
            dsize = "3";
        }
        if ($(this).width() < 600) {
            dsize = "2";
        }
        $('p').html(dsize);
    });
    $('p').html(dsize);
});

一般来说，“响应式内容”是通过css与媒体查询完成的。

Answer 3

试试这个：

$(function () {
  var dsize = "6";
  $(window).on('resize', function () {
    if ($(window).width() >= 1200) {
        var dsize = "6";
    }
    if ($(window).width() < 1200) {
        var dsize = "5";
    }
    if ($(window).width() < 1000) {
        var dsize = "4";
    }
    if ($(window).width() < 800) {
        var dsize = "3";
    }
    if ($(window).width() < 600) {
        var dsize = "2";
    }
    $('p').html(dsize);
  }).resize();  //<---------add this to calculate on page load itself
});

jQuery on resize仅根据浏览器宽度更新变量

3 个答案:

Demo @ Fiddle