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

在开发过程中使用Verge.js可显示当前视口宽度和高度跨浏览器。将具有动态VergeJS视口值的div添加到HTML

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到我喜欢他们追加到body与它们包含一刹让他们的价值观HTML。

我已经完成了这个代码。 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被赋予的价值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]); 
     } 
}

刚刚意识到我需要和一刹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

来源

2016-11-18 lowtechsun

我认为你的初始问题只是在你的JS追加的地方。如果你将它追加到getVergeValues函数中，它似乎可以工作：https://jsfiddle.net/zfzq1crL/ – Pilou

@ Pierre-LouisLaffont Jeeeezuz！请尽快回复并兑现你的50分！我再次遇到了一个案例，那就是我没有看到我在树林中的森林。如果你有时间，请详细说明这个“太容易相信但是很有效”的“思考JS”**的方式，这可以帮助我在未来的问题中解决这样简单的问题。 **什么地方以及为什么我不提出这样的问题？**没有足够的培训或解决问题/思考的不好方法？ – lowtechsun

我不知道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个部分：

尺寸与边缘
你的元素
文本的设置与您所在的元素
你的元素在你的页面中的Add建设的演算

其实项目2和4必须只做一次，因为你不想再次添加这些元素。

的和3项1必须repeted每个调整为在你第一次的jsfiddle。

所以把元件2,4出的功能使你的代码的行为，你所希望的方式：https://jsfiddle.net/zfzq1crL/。

如果您想保留这些元素的功能，你可以创建一个名为只在文件准备功能：https://jsfiddle.net/tfqsjf2t/。

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

来源

2016-11-25 13:37:19 Pilou

非常感谢你！ – lowtechsun

因为你是append ING，旧的价值没有得到清除。为了实现你想要的，你应该设置html中已经存在的宽度和高度div。因此，每次调用函数时都不应创建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(); 
}

来源

2016-11-22 13:01:24

你的答案实际上是我[我的第一个jsfiddle]（https://jsfiddle.net/ccL30a26/）所做的。 “_替代将#notification，.w和.h div硬编码到HTML中，我喜欢将它们附加到包含Verge给它们的值的正文中。”然后，[你建议]（https：// jsfiddle.net/ccL30a26/2/）也不起作用，初始值不显示在文档'load'或'ready'上。仔细阅读我的问题，做一个jsfiddle，'追加'包含Verge值的div，并且包含一个'for'循环，其中注释代码只显示最新的Verge值。看赏金描述，thx！ – lowtechsun

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

回答

相关问题