Question

在开发过程中使用Verge.js以跨浏览器显示当前视口宽度和高度。

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

而不是硬编码#notification，.w＆amp; .h div成HTML我喜欢将它们附加到body，其中包含Verge为其提供的值。

我已用此代码实现了这一目标。 https://jsfiddle.net/ccL30a26/1/

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

var $width  = $( "<div class='w'></div>" );
var $height = $( "<div class='h'></div>" );

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

$( "body" ).append( $width, $height);

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

然而现在在domready上没有显示任何值，并且在窗口调整大小时，值会加到填充视口中。

如何在domready上显示初始值，并且只显示在窗口调整大小时显示的当前值？

修改
查看lab.js我知道我必须使用for循环更新已更改的输出，outputs，updates和prev都是空数组l 1}}和i的值为0。 this问题也很可能对我有所帮助。

// Update changed outputs
for (l = updates.length; i < l; i++) {
    if (i in updates && updates[i] !== prev[i]) {
        (outputs[i] = outputs[i] || $(prefix + i)).text(updates[i]);
        }
}

刚刚意识到我需要来自Verge的updates[31] = viewportW();和updates[32] = viewportH();。不知道如何将verge.viewportW()和verge.viewportH()值实际放入数组中然后迭代它们。如果有人可以在for循环中说出我需要做的事情，那将对我有很大的帮助。

简单地说我正在寻找这个。
1.从verge.viewportW()获取第一个值并将其存储在索引0处阵列 2.将.text()的值添加到div 3.获取第二个值verge.viewportW()并将其存储在数组的索引1 4.用新值替换div中的旧值 5.只要数组中有新值，就执行此操作。

如果有人能够在评论正确的for循环的每一行时用非常简单的措辞来表达这一点，我认为这将有助于我理解迭代数组的基本原理。

我熟悉一个看起来像这样的for循环。这里购物清单的所有商品都是done类。

for (var index = 0; index < shoppingList.length; index++){
    shoppingList[index].className = 'done';
}

我只是不太明白如何将其转换为具有更改值，旧输出和新输出的数组。破解我的头..

解决方案：
https://jsfiddle.net/ccL30a26/3/的Pierre-Louis Laffont

Answer 1

我不了解lab.js，但是在您的尝试中，您尝试过的javascript中存在错误。

function getVergeValues() {
   viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
   viewportHeight = verge.viewportH() // Get the viewport height in pixels.

   var $width  = $( "<div class='w'></div>" );
   var $height = $( "<div class='h'></div>" );

   $('.w').text(viewportWidth  + 'px wide');
   $('.h').text(viewportHeight + 'px high');

   $( "body" ).append( $width, $height);
}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

在此代码段中，您有两个部分：

名为getVergeValues
在窗口调整大小时调用两个jquery，并在调用函数的位置准备文档

在您的功能中，您有4个部分：

带有边缘的尺寸计算
构建元素
元素中文字的设置
在页面中添加元素

实际上，第2项和第4项必须只进行一次，因为您不想再次添加这些元素。

第1和第3项必须在每个调整大小时重复，就像在第一个jsfiddle中一样。

因此，将元素2和4放在函数之外会使代码按照您想要的方式运行：https://jsfiddle.net/zfzq1crL/。

如果您想将这些元素保留在一个函数中，您可以创建一个仅在文档就绪时调用的函数：https://jsfiddle.net/tfqsjf2t/。

你仍然需要在init函数中调用你的函数，以便在元素的开头有大小。

Answer 2

因为您是append，所以旧值不会被清除。要实现您想要的效果，您应该设置身体中已存在的宽度和高度div的html。因此，每次调用函数时都不应创建w和h div。相反，您应该更改他们的html。

HTML：

<body>
    ...Your body content..
    <div class="w"></div>
    <div class="h"></div>
</body>

JS：

function getVergeValues() {

    viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
    viewportHeight = verge.viewportH() // Get the viewport height in pixels.

    $('.w').html(viewportWidth  + 'px wide');
    $('.h').html(viewportHeight + 'px high');    
}

$(window).on('resize', getVergeValues);

此外，您应该在文档加载时调用getVergeValues函数来填充最初的值。

$(document).on('ready', function(){
    getVergeValues();
}

将具有动态VergeJS视口值的div添加到HTML

2 个答案: