首頁(yè) 猿問(wèn) 按值升序?qū)D像數(shù)組進(jìn)行排序

按值升序?qū)D像數(shù)組進(jìn)行排序

Html5

回首憶惘然 2023-10-30 10:56:36

cardShop 是一個(gè)帶有子項(xiàng)的 div -> （具有不同 ID 和值的圖像）每個(gè)卡值看起來(lái)像這個(gè) 2000,500 或這個(gè) 1500,200 我想按數(shù)組中的第一個(gè)數(shù)字按值升序?qū)D像進(jìn)行排序。該函數(shù)由右上角的藍(lán)色按鈕調(diào)用。這是我到目前為止所做的。HTML文檔<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="script.js"></script> <style> #toSort{ background-color: #3b5998; width:50px; height:50px; float:right; }</style></head><body> <div id = "cardShop" style="overflow:scroll"> <div id ="toSort" onclick="sorting()"></div> <img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value = 3000,2500> <img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value = 1400,1200> <img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value = 1200,700> <img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value = 3200,2500> <img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value = 2500,2100> <img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value = 2500,2100> <img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value = 2000,1700> <img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value = 2300,2100> <img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value = 2400,2000> <img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value = 1800,1600> <img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value = 2800,2200> <img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value = 4500,3800> </div></body></html>JavaScript 文件function sorting() { let deck = [].slice.call(document.getElementById("cardShop").children) for (let i = 2; i < deck.length; i++) { let elementValue = deck[i].getAttribute('value').split(",").map(Number); }}

查看完整描述

4 回答

白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

const sorting = () => {

const images = document.getElementsByTagName('img');

const deck = [].slice.call(images);

const container = document.getElementById('cardShop');

const deckSorted = deck.sort((a, b) => {

const aToSort = a.getAttribute('value').split(',')[0];

const bToSort = b.getAttribute('value').split(',')[0];

return aToSort - bToSort;

});

for(let i = 0; i < deck.length; i++) {

deck[i].parentNode.removeChild(deck[i]);

container.append(deckSorted[i]);

}

</div>

您可以使用排序來(lái)完成此操作，然后刪除舊元素并附加新元素，如下所示。

反對(duì) 回復(fù) 2023-10-30

qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

const setup = () => {

const toSort = document.querySelector('#toSort');

toSort.addEventListener('click', sorting);

};

const sorting = () => {

let cardShop = document.querySelector('#cardShop');

let dek = [...cardShop.querySelectorAll('img')]

.sort((a,b) => {

let valuesA = a.getAttribute('value').split(',');

let valuesB = b.getAttribute('value').split(',');

let comparer = valuesA[0].localeCompare(valuesB[0]);

if(comparer === 0)

comparer = valuesA[1].localeCompare(valuesB[1]);

return comparer;

})

.map(node=>cardShop.appendChild(node));

};

//load

window.addEventListener('load', setup);

#toSort{

background-color: #3b5998;

width:50px;

height:50px;

float:right;

}

<!DOCTYPE html>

<html>

<body>

</div>

</body>

</html>

反對(duì) 回復(fù) 2023-10-30

LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

你走在正確的道路上，我為你完成了代碼。該代碼將所有圖像推送到一個(gè)包含 json 元素的數(shù)組，該數(shù)組包含元素和值（左側(cè)）。然后，它按正確的順序?qū)λ鼈冞M(jìn)行排序，刪除所有圖像并按正確的順序再次插入它們。

工作示例： https: //playcode.io/537993

function sorting() {

let deck = [].slice.call(document.getElementById("cardShop").children)

let images = []

let button = document.getElementById('toSort');

for (let i = 1; i < deck.length; i++) {

let elementValue = deck[i].getAttribute('value').split(",").map(Number);

// add all values to a array with json info about the element

images.push({

'element': deck[i],

'value': elementValue[0]

});

}

// sort them on the value

images.sort((a, b) => {

return a.value - b.value;

})

// remove all elements in the div

document.getElementById('cardShop').innerHTML = '';

// add the button again

document.getElementById('cardShop').appendChild(button);

// Add the images again

images.forEach(image => {

document.getElementById('cardShop').appendChild(image.element)

})

}

反對(duì) 回復(fù) 2023-10-30

開心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

您的 HTML 標(biāo)記已損壞。確保將其重構(gòu)為<img ... value="1200,2500" />而不是<img ... value=1 200,2500 />，因?yàn)?Javascript 無(wú)法處理它。

function sorting () {

const imgWrapper = document.getElementById('cardShop')

const deck = [].slice.call(imgWrapper.getElementsByTagName('img'))

deck.sort((currentImage, nextImage) => {

const currentImageValue = parseInt(currentImage.getAttribute('value').split(',')[0])

const nextImageValue = parseInt(nextImage.getAttribute('value').split(',')[0])

return currentImageValue - nextImageValue

})

// at this point the array has been sorted, but not the actual HTML!

console.log(deck)

// optional - if you want to redraw them with the new order in the HTML

const oldImgHTMLCollection = [].slice.call(imgWrapper.getElementsByTagName('img'))

oldImgHTMLCollection.forEach(oldImg => imgWrapper.removeChild(oldImg))

deck.forEach(newImg => imgWrapper.appendChild(newImg))

}

sorting()

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

</style>

</head>

<body>

</div>

</body>

</html>

反對(duì) 回復(fù) 2023-10-30

4 回答
0 關(guān)注
231 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

按值升序?qū)D像數(shù)組進(jìn)行排序

按值升序?qū)D像數(shù)組進(jìn)行排序

4 回答

添加回答