Javascript 按值按升序对图像数组进行排序_Javascript_Html

Javascript 按值按升序对图像数组进行排序

javascript html

Javascript 按值按升序对图像数组进行排序,javascript,html,Javascript,Html,cardShop是一个包含子项->（具有不同ID和值的图像）的div 每一张卡的价值都是2000500或1500200 我想按数组中的第一个数字按值升序对图像进行排序。该函数由右角的蓝色按钮调用以下是我迄今为止所做的工作 HTML文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

cardShop是一个包含子项->（具有不同ID和值的图像）的div 每一张卡的价值都是2000500或1500200 我想按数组中的第一个数字按值升序对图像进行排序。该函数由右角的蓝色按钮调用

以下是我迄今为止所做的工作

HTML文档

<!DOCTYPE html>
<html lang="en">
<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>


文件
#托索{
背景色：#3b5998；
宽度：50px；
高度：50px；
浮动：对；
}

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);
    }
}

函数排序（）{
let deck=[].slice.call（document.getElementById（“cardShop”）.children）
for（设i=2；i

您的HTML标记已损坏。确保将其重构为

您走对了，我为您完成了代码。代码将所有图像推送到一个包含json元素的数组中，该数组包含元素和值（左一个）。然后按正确的顺序对它们进行排序，删除所有图像，然后按正确的顺序再次插入

工作示例：

函数排序（）{
let deck=[].slice.call（document.getElementById（“cardShop”）.children）
让图像=[]
let button=document.getElementById（'toSort'）；
for（设i=1；i{
返回a.value-b.value；
})
//删除div中的所有元素
document.getElementById（'cardShop'）。innerHTML=''；
//再次添加按钮
document.getElementById（'cardShop'）.appendChild（按钮）；
//再次添加图像
images.forEach（image=>{
document.getElementById（'cardShop'）.appendChild（image.element）
})
}

const排序=（）=>{
const images=document.getElementsByTagName（'img'）；
const deck=[].slice.call（图像）；
const container=document.getElementById（'cardShop'）；
const deckSorted=deck.sort（（a，b）=>{
常量aToSort=a.getAttribute（'value'）.split（'，'）[0]；
const bToSort=b.getAttribute（'value'）.split（'，'）[0]；
返回aToSort-bToSort；
});
for（设i=0；i



分类

const setup=（）=>{
const toSort=document.querySelector（“#toSort”）；
toSort.addEventListener（'click'，排序）；
};
常量排序=（）=>{
让cardShop=document.querySelector（“#cardShop”）；
让dek=[…cardShop.querySelectorAll（'img'）]
.排序（（a，b）=>{
让valuesA=a.getAttribute（'value'）.split（'，'）；
让valuesB=b.getAttribute（'value'）.split（'，'）；
让comparer=valuesA[0].localeCompare（valuesB[0]）；
如果（比较器===0）
comparer=valuesA[1].localeCompare（valuesB[1]）；
返回比较器；
})
.map（节点=>cardShop.appendChild（节点））；
};
//装载
window.addEventListener（“加载”，设置）
#排序{
背景色：#3b5998；
宽度：50px；
高度：50px；
浮动：对；
}

您是希望对子数组进行简单排序，还是希望对img元素的顺序也进行排序？这正是我应该做的。我的解决方案就被扔进了垃圾箱，值得一提。由于它当前需要拆分，因此不会检查值的内容是否正确。您可能会去buildin检查value的内容是否正确。另一个更新，您可能需要修剪string的值，以防它们是html中的空白。
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)
  })
}