使用Vanilla JS订购卡

时间：2020-02-07 03:00:54

标签： javascript html

对于作业，我需要创建卡片并用JS填充内容。这样我就没问题了。但是，下一步我需要订购这些卡。我需要一个按钮来设置这些顺序。我不知道从哪里开始。任何信息，将不胜感激！

HTML。刚刚使用了一个div来托管所有卡。它们动态显示。 

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <nav class="navbar">
     <div class="container">
         <div class="logo"></div>
         <ul>
             <li>World</li>
             <li>Sports</li>
             <li>Opinion</li>
             <li><strong>Lifestyle</strong></li>
             <li>Business</li>
             <li>Culture</li>
             <li>Fasion</li>
             <li>Tech</li>
         </ul>
         <span class="icon">
           <i class="ion-ionic" style='color: black; background: black;'></i>
         </span>
     </div>
 </nav>

 <section class="section">
     <div class="container">
         <div style='margin: 40px 10px 40px'>
             <h1>Lifestyle.</h1>
             <p>The latest and best lifestyle articles selected<br/>
                 by our editorial office.
             </p>
         </div>
     </div>

     <div class="cardContainer" id="card-container">

     </div>
 </section>

 <footer class="footer">
     <div class="content has-text-centered">
         <p>
             <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
             <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
             is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
         </p>
     </div>
 </footer>

 <script type="text/javascript" src='./app.js'></script>
</body>
</html>

以下js： 第一部分全部来自老师。颜色列表等。我正在使用内部html生成内容。

const black = 'rgba(23,35, 50, 1)'
const brown = 'rgba(205,164, 133, 1)'
const greenblue = 'rgba(62,171, 201, 1)'
const pink = 'rgba(254,156, 161, 1)'
const blue = 'rgba(98,189, 254, 1)'


const data = [
    {
        topic: 'Food',
        title: 'Wake Up and Smell the Coffee',
        price: '$0.90',
        color: green,
        overlay: green,
        img: 'https://source.unsplash.com/featured/?coffee'
    },
    {
        topic: 'Architecture',
        title: 'The Brand New NASA Office',
        price: '$0.19',
        color: black,
        overlay: black,
        img: 'https://source.unsplash.com/featured/?office'
    },
    {
        topic: 'Travel',
        title: 'Experience the Saharan Sands',
        price: '$2.29',
        color: brown,
        overlay: brown,
        img:'https://source.unsplash.com/featured/?desert'
    },
    {
        topic: 'Interior',
        title: '9 Air-Cleaning Plants Your Home Needs',
        price: '$0.09',
        color: greenblue,
        overlay: greenblue,
        img: 'https://source.unsplash.com/featured/?plants'
    },
    {
        topic: 'Food',
        title: 'One Month Sugar Detox',
        price: '$0.99',
        color: pink,
        overlay: pink,
        img: 'https://source.unsplash.com/featured/?sugar'
    },
    {
        topic: 'Photography',
        title: 'Shooting Minimal Instagram Photos',
        price: '$0.29',
        color: blue,
        overlay: blue,
        img: 'https://source.unsplash.com/featured/?photography'
    }
]




const cardText = document.querySelector('#card-container')

let html = ""
for (i of data) {
    html = html + `
    <div class="cards" style="background-color:${i.color}; background-image:url(${i.img}); background-size:cover;">
    <div class="text">
        <h3 style="background-color:${i.overlay};">${i.topic}</h3>
        <h4 style="background-color:${i.overlay};">${i.title}</h4>
    </div>
    <button>Read for ${i.price}</button>
</div>
    `  
}

cardText.innerHTML = html

正如我提到的那样，我需要根据以上三种不同的数据类型对所有卡进行排序，但是没有太多使用排序的经验。

2 个答案:

答案 0 :(得分：2)

不对DOM进行排序，对数据进行排序。这样，您可以在页面的第一个渲染之前进行排序。

创建函数，该函数采用要排序的属性的名称和数据数组。只要确保将数字数据转换为数字即可！

然后您可以调用此方法，并根据单击的按钮更改属性参数。

const black = 'rgba(23,35, 50, 1)'
const brown = 'rgba(205,164, 133, 1)'
const greenblue = 'rgba(62,171, 201, 1)'
const pink = 'rgba(254,156, 161, 1)'
const blue = 'rgba(98,189, 254, 1)'
const green = 'rgba(0,254, 0, 1)'

/*FUnction to sort the cards*/
function sortCards(property, cards) {
  cards.sort(function(a,b){
    //Return 0 if the same
    if(a[property] == b[property] ) {
      return 0;
    }
    
    //Grab property values
    var a = a[property]; 
    var b = b[property];
    
    //Handle numbers correctly
    if(property == "price") {
      //Make numbers if price - strip $ and ,
      a = parseFloat(a.replace(/\$|,/g, ""));
      b = parseFloat(b.replace(/\$|,/g, ""));
    }
    
    //Normal sort return
    return a > b ? 1 : -1;
  })
}



const data = [
    {
        topic: 'Food',
        title: 'Wake Up and Smell the Coffee',
        price: '$0.90',
        color: green,
        overlay: green,
        img: 'https://source.unsplash.com/featured/?coffee'
    },
    {
        topic: 'Architecture',
        title: 'The Brand New NASA Office',
        price: '$0.19',
        color: black,
        overlay: black,
        img: 'https://source.unsplash.com/featured/?office'
    },
    {
        topic: 'Travel',
        title: 'Experience the Saharan Sands',
        price: '$2.29',
        color: brown,
        overlay: brown,
        img:'https://source.unsplash.com/featured/?desert'
    },
    {
        topic: 'Interior',
        title: '9 Air-Cleaning Plants Your Home Needs',
        price: '$0.09',
        color: greenblue,
        overlay: greenblue,
        img: 'https://source.unsplash.com/featured/?plants'
    },
    {
        topic: 'Food',
        title: 'One Month Sugar Detox',
        price: '$0.99',
        color: pink,
        overlay: pink,
        img: 'https://source.unsplash.com/featured/?sugar'
    },
    {
        topic: 'Photography',
        title: 'Shooting Minimal Instagram Photos',
        price: '$0.29',
        color: blue,
        overlay: blue,
        img: 'https://source.unsplash.com/featured/?photography'
    }
]




const cardText = document.querySelector('#card-container')

let html = ""

//Sort the data as required
sortCards("price", data) ;

for (i of data) {
    html = html + `
    <div class="cards" style="background-color:${i.color}; background-image:url(${i.img}); background-size:cover;">
    <div class="text">
        <h3 style="background-color:${i.overlay};">${i.topic}</h3>
        <h4 style="background-color:${i.overlay};">${i.title}</h4>
    </div>
    <button>Read for ${i.price}</button>
</div>
    `  
}

cardText.innerHTML = html
<nav class="navbar">
     <div class="container">
         <div class="logo"></div>
         <ul>
             <li>World</li>
             <li>Sports</li>
             <li>Opinion</li>
             <li><strong>Lifestyle</strong></li>
             <li>Business</li>
             <li>Culture</li>
             <li>Fasion</li>
             <li>Tech</li>
         </ul>
         <span class="icon">
           <i class="ion-ionic" style='color: black; background: black;'></i>
         </span>
     </div>
 </nav>

 <section class="section">
     <div class="container">
         <div style='margin: 40px 10px 40px'>
             <h1>Lifestyle.</h1>
             <p>The latest and best lifestyle articles selected<br/>
                 by our editorial office.
             </p>
         </div>
     </div>

     <div class="cardContainer" id="card-container">

     </div>
 </section>

答案 1 :(得分：0)

您需要在卡片元素数组上运行sort方法

yourArray.sort(function(a,b) {
  // a and b are DOM elements from your array!
  let el1 = a.getElementsByTagName('h4')[0].value
  let el2 = b.getElementsByTagName('h4')[0].value
  return el1 - el2
}
// Wrap your loop and your innerhtml assignment in a function, and now call it again with your new array

此处的文档显示了如何编写比较功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

相关问题
最新问题