jquery - 将具有动态 VergeJS 视口(viewport)值的 div 添加到 HTML

Question

使用 Verge.js在开发期间跨浏览器显示当前视口(viewport)宽度和高度。

https://jsfiddle.net/ccL30a26/

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 和 .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 上没有显示任何值，并且在窗口调整大小时，这些值被加起来填充视口(viewport)。

如何获取在 domready 上显示的初始值以及在调整窗口大小时仅显示当前值？

编辑
看着lab.js我知道我必须使用 for 循环来更新更改的输出，其中 outputs、updates 和 prev 都是空数组以及 l 和 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 循环。这里购物 list 的所有项目都被赋予类 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);

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

1. 名为 getVergeValues 的函数
2. 在您调用函数的位置调整窗口大小和文档就绪时调用两个 jquery

在你的函数中你有 4 个部分:

1. 边缘尺寸的计算
2. 构建你的元素
3. 元素中文本的设置
4. 在页面中添加元素

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

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

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

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

您仍然需要在 init 函数中调用您的函数，以便在开始时在您的元素中获得尺寸。