我有一個圖表，它根據數值將其值渲染為 body 元素內的 div，并帶有一個類。這工作正常。但接下來我需要根據 div 的數值或背景顏色對它們進行排序。但是，它需要從頁面的左下角開始，并隨著數字的增加向上向右散開?；旧暇拖裾劬€圖一樣。如果可能的話，我想遠離圖書館。我該如何處理這個問題？謝謝你們。let interval = setInterval(makeDivs, 5);function makeDivs(){ let cont = checkHeight(); if(cont){ let div = document.createElement('div'); let randNum = Math.random() * 100; if(randNum < 20) { div.classList.add('blue') } if(randNum >= 20 && randNum < 40) { div.classList.add('green') } if(randNum >= 40 && randNum < 60) { div.classList.add('yellow') } if(randNum >= 60 && randNum < 80) { div.classList.add('orange') } if(randNum >= 80 && randNum < 101) { div.classList.add('red') } div.textContent = randNum.toFixed(2); document.querySelector('body').appendChild(div); } else { alert('done'); clearInterval(interval); sortDivs(); // Begin sorting divs }}function checkHeight(){ let w = window.innerHeight; let b = document.querySelector('body').offsetHeight; if(b < w) { return true; } else { return false; }}function sortDivs(){ document.querySelector("body div:last-child").remove(); alert('sorting now...')}* { box-sizing: border-box;}body { width: 100vw; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: end;}body div { width: calc(10% + 1px); text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 10px;}body div.blue { background: aqua; }body div.green { background: green; }body div.yellow { background: yellow; }body div.orange { background: orange; }body div.red { background: red; }
3 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
假設您已經有一種在網格中組織此類 DIV 的機制（如圖所示），那么以下內容應該為您提供所需的內容：
var items = divList.filter((div) => div.nodeType == 1); // get rid of the whitespace text nodes
items.sort(function(a, b) {
return a.innerHTML == b.innerHTML
? 0
: (a.innerHTML > b.innerHTML ? 1 : -1);
});
然后，根據需要將它們放回 DOM 中，例如：
for (i = 0; i < items.length; ++i) {
divList.appendChild(items[i]);
}
莫回無
TA貢獻1865條經驗 獲得超7個贊
這適用于第一個代碼示例！
嘗試這個 sortDivs 函數：
function sortDivs() {
document.querySelector("body div:last-child").remove();
alert('sorting now...')
let toSort = document.getElementsByTagName("div")
toSort = Array.prototype.slice.call(toSort, 0)
toSort.sort((a, b) => {
let aord = parseFloat(a.textContent);
let bord = parseFloat(b.textContent);
return bord - aord;
})
document.body.innerHTML = ""
for(var i = 0, l = toSort.length; i < l; i++) {
document.querySelector('body').appendChild(toSort[i]);
}
}
并在css文件中將flex-wrap設置為wrap-reverse。希望我能幫忙:)
PS：請實現一些else if而不是僅執行if
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
這是我的示例代碼的一個小擺弄，演示了一個簡單的解決方案，使用純 JavaScript 和絕對 CSS 定位來實現您想要實現的目標。?
正如一些人已經指出的那樣，可能有一個庫已經為此提供了更好且完整的解決方案 - 我沒有研究是否是這樣。
代碼：
文件.js
var container = document.getElementById("container")
var results = [1,2,3,4,5,6,7,8]
//you can pre-calculate the order of the distances
//here already orderdered array [distanec][X-axis][Y-axis]
var distances =[[0,0,0],
? ? ? ? ? ? ? ? [1,1,0],
? ? ? ? ? ? ? ? [1,0,1],
? ? ? ? ? ? ? ? [1.414, 1,1],
? ? ? ? ? ? ? ? [2,0,2],
? ? ? ? ? ? ? ? [2,2,0],
? ? ? ? ? ? ? ? [2.234, 2,1],
? ? ? ? ? ? ? ? [2.234, 1,2]]
for (i = 0; i < results.length; i++){
? var newDiv = document.createElement("div")
? newDiv.className = "result"
? newDiv.innerHTML = results[i]
? newDiv.style.left = distances[i][1]*20 + "px"
? newDiv.style.bottom = distances[i][2]*20 + "px"
? container.appendChild(newDiv)
}
function setColor(element){
?// set class based on value - you already have this part
}
樣式.css
#container {
? border: 4px;
? border-color: red;
? border-style: solid;
? height: 200px;
? width: 200px;
? position: relative;
}
.result{
? border: 2px;
? width: 20px;
? height: 20px;
? position: absolute;
? border-color: blue;
? border-style: solid;
? text-align: center;
}
網站.html
<div id="container">
</div>
輸出：
- 3 回答
- 0 關注
- 201 瀏覽
添加回答
舉報
0/150
提交
取消