將具有動態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

回答

相關問題