CardShop to div z dziećmi -> (obrazy z różnymi identyfikatorami i wartościami) każda wartość karty wygląda tak, jak ta 2000,500 lub ta 1500,200 Chcę posortować obrazy według wartości w kolejności rosnącej według pierwszej liczby w tablicy. Funkcję wywołuje niebieski przycisk w prawym rogu.

Oto, co zrobiłem do tej pory.

HTML DOC

<!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>

Plik 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);
    }
}
2
TheWorstOneAlive 2 kwiecień 2020, 13:37

4 odpowiedzi

Najlepsza odpowiedź

Twoje znaczniki HTML zostały uszkodzone. Upewnij się, że refaktoryzujesz go na <img ... value="1200,2500" /> zamiast <img ... value=1 200,2500 />, ponieważ żaden Javascript nie będzie w stanie tego obsłużyć.

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="script.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="cardShop" style="overflow:scroll">
    <div id="toClose"></div>
    <div id="toSort"></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>
0
Georgi B. Nikolov 2 kwiecień 2020, 10:58
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 lang="en">
  <body>
    <div id = "cardShop" style="overflow:scroll">
      <div id ="toSort"></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>
1
Jens Ingels 2 kwiecień 2020, 11:38

Jesteś na dobrej drodze, skończyłem kod dla Ciebie. Kod wypycha wszystkie obrazy do tablicy z elementami json, która zawiera element i wartość (lewą). Następnie sortuje je we właściwej kolejności, usuwa wszystkie obrazy i wstawia je ponownie we właściwej kolejności.

Przykład pracy: 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)
  })
}
1
Gustav P Svensson 2 kwiecień 2020, 11:01
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 id="cardShop" style="overflow:scroll">
        <div id ="toSort" onclick="sorting()">Sort</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>

Możesz to zrobić za pomocą sortowania, a następnie po prostu usuń stary element i dołącz nowy, w ten sposób.

2
Nicolae Maties 2 kwiecień 2020, 11:14