从另一个变量动态更新变量

a。随着用户调整窗口大小，body_size变量随时更新。 //在其他帖子中得到这个排序。

b.Then知道变量body_size我需要更新另一个变量：

如果body_size小于/大于/小于等X（价值由我设定），然后SlidesInView应该进行自我更新。

默认的SlidesInView是3.

一切都应该在飞行中发生。请参阅以下片段：

$(document).ready(function() { 
 

 
    var body_size; // this updates correctly 
 

 
    var resizeTimer; 
 

 
    function setContainerWidth() { 
 
    body_size = $('.container').width(); 
 
    } 
 

 
    $(window).resize(function() { 
 

 
    clearTimeout(resizeTimer); 
 
    resizeTimer = setTimeout(function() { 
 

 
     setContainerWidth(); 
 
     
 

 
    }, 200); 
 

 
    }); 
 
    setContainerWidth(); 
 
    console.log(body_size); 
 

 
    var SlidesInView = 3; // this should update depending on result below : 
 
    $(window).on('resize', function() { 
 
    setContainerWidth(); // to check width on resize? 
 
    if (body_size => 980) { 
 
     SlidesInView = 4; // change SlidesInView above if condition is met. 
 
    } else if (body_size <= 640) { 
 
     SlidesInView = 1; //change SlidesInView above if condition is met. 
 
    } 
 
    }); 
 

 
    console.log(SlidesInView); 
 
    }); // doc ready

.container{ 
 
    height:100vh; 
 
    width:100vw; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

来源

2016-11-06 user7121582

不要创建第二缩放事件处理程序。相反，更新你已经对每个执行的功能slidesInView调整：setContainerWidth：

$(document).ready(function() { 
    var body_size, resizeTimer, slidesInView; 

    function setContainerWidth() { 
    body_size = $('.container').width(); 
    slidesInView = body_size >= 980 ? 4 
       : body_size >= 640 ? 3 
       :     1; 
    } 

    $(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(setContainerWidth, 200); 
    }); 
    setContainerWidth(); 
});

一些言论：

=>是无效的比较操作符（它具有在arrow functions上下文中的另一个含义）。改为使用>=;
不要用第一个大写字母来命名变量。通常的做法是仅为类/构造函数名称而不是其他变量。
ternary operator（... ? .... : ...）非常适合您想要为slidesInView分配值。
当你调用一个setTimeout只是一个功能，你可以传递函数作为第一个参数setTimeout（确保不呼叫，但传递函数本身），就像我在上面的代码做。

来源

2016-11-06 10:27:43 trincot

谢谢你的快速反应和好的提示。目前看来，价值更新刷新。例如：容器宽度> = 980？ 4.片段检查初始值，然后我调整浏览器窗口的大小以满足下一个条件，我需要刷新页面。有没有办法让它随时改变。要在条件改变后立即启动更改？只是想知道移动设备（风景与人像）。 – user7121582

当然，但这确实是一个不同的问题：你想重建你拥有的内容。这个问题是关于更新一个变量，而不是任何DOM内容。如果您对此有疑问，我会建议将它作为一个新问题发布，并添加需要重建的HTML，解释变量'slidesInView'应该如何影响它。一旦你创建了这个问题，请随时在这里留言，如果你愿意，我也可以看看。 – trincot

谢谢。我创造了新的问题。放置我在那里的所有代码。如果你能看一下，我将不胜感激。这里是链接[新问题]（http://stackoverflow.com/questions/40449005/change-number-of-slides-depending-on-element-width） – user7121582

从另一个变量动态更新变量

回答

相关问题