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

【问题标题】：Add div with dynamic VergeJS viewport values to HTML将具有动态 VergeJS 视口值的 div 添加到 HTML
【发布时间】：2017-04-02 00:17:25
【问题描述】：

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

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

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

编辑
看着lab.js，我知道我必须使用for 循环来更新更改的输出，其中outputs、updates 和prev 都是空数组，l 和i 被赋予值@ 987654341@。 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

【问题讨论】：

我认为你最初的问题只是你的 JS 中追加的地方。如果您将它附加到 getVergeValues 函数之外，它似乎可以工作：jsfiddle.net/zfzq1crL
@Pierre-LouisLaffont Jeeeezuz！请尽快回答并兑现您的 50 分！又是我觉得只见树木不见森林的情况。请如果您有时间详细说明这种“太容易相信但它确实有效”的“用 JS 思考”的方式，这可以帮助我在未来的问题中解决类似这样的简单问题。 我是如何在哪里以及为什么没有想到这个的？没有足够的培训或处理问题/思考的方式不好？

标签： jquery html

【解决方案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);

在这段代码 sn-p 中你有两个部分：

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

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

边缘尺寸的计算
元素的构造
元素中文本的设置
在页面中添加元素

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

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

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

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

您仍然必须在 init 函数中调用您的函数，以便在开始时在您的元素中设置大小。

【讨论】：

非常感谢！

【解决方案2】：

因为您是appending，所以旧值不会被清除。为了实现你想要的，你应该设置body中已经存在的宽度和高度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();
}

【讨论】：

你的回答就是我实际上所做的in my first jsfiddle。 “我不想将#notification，.w 和 .h div 硬编码到 HTML 中，我喜欢将它们附加到正文中，其中包含 Verge 提供的值。” 那么you suggest也不起作用，文档load 或ready 上不显示初始值。仔细阅读我的问题，制作一个 jsfiddle，append 包含 Verge 值的 div 并请包含一个 for 循环，其中注释代码仅显示最新的 Verge 值。查看赏金说明，谢谢！