Fatal编程技术网
  • javascript/
  • Javascript 使用vanilla js订购卡

Javascript 使用vanilla js订购卡

javascript html

Javascript 使用vanilla js订购卡,javascript,html,Javascript,Html,对于作业，我需要创建卡片并用JS填充内容。这个我完成没有问题。但是下一步我需要订购这些卡。我需要一个按钮来设置这些命令。我不知道从哪里开始。任何信息将不胜感激 HTML。只是用了一个div来托管所有的卡。它们动态地出现 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/a

对于作业，我需要创建卡片并用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>



    

  • 世界
    • 

  • 运动
    • 

  • 意见
    • 

  • 生活方式
    • 

  • 生意
    • 

  • 培养
    • 

  • 法辛
    • 

  • 技术人员
    • 


生活方式。
选择的最新和最佳生活方式文章

我们的编辑部。



Bulmaby。源代码已获得许可
. 网站内容
是有执照的。
报告如下： 第一部分全部来自老师。颜色列表等。我正在使用内部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

const black='rgba（23,35,50,1）'
常数布朗='rgba（205164133，1）'
常量绿蓝='rgba（62171201,1）'
常量粉色='rgba（254156161,1）'
常数蓝='rgba（98189254,1）'
常数数据=[
{
主题:"食物",，
标题：“醒来，闻一闻咖啡”，
价格：‘$0.90’，
颜色：绿色，
覆盖：绿色，
img:'https://source.unsplash.com/featured/?coffee'
},
{
主题:"建筑学",，
标题：“全新的NASA办公室”，
价格：‘$0.19’，
颜色：黑色，
覆盖：黑色，
img:'https://source.unsplash.com/featured/?office'
},
{
主题:"旅游",，
标题：“体验撒哈拉沙漠”，
价格：‘$2.29’，
颜色：棕色，
覆盖层：棕色，
img:'https://source.unsplash.com/featured/?desert'
},
{
主题:"室内",，
标题：“9家你家需要的空气净化厂”，
价格：‘$0.09’，
颜色：绿蓝色，
覆盖：绿蓝色，
img:'https://source.unsplash.com/featured/?plants'
},
{
主题:"食物",，
标题：“一个月的糖排毒”，
价格：‘$0.99’，
颜色：粉红色，
覆盖层：粉红色，
img:'https://source.unsplash.com/featured/?sugar'
},
{
主题:"摄影",，
标题：“拍摄最小Instagram照片”，
价格：‘$0.29’，
颜色：蓝色，
覆盖：蓝色，
img:'https://source.unsplash.com/featured/?photography'
}
]
const cardText=document.querySelector（“#卡容器”）
让html=“”
第（一）部分数据{
html=html+`
${i.topic}
${i.title}
读取${i.price}
`  
}
cardText.innerHTML=html
正如我提到的，我需要根据上述三种不同的数据类型对所有卡片进行排序，但我没有太多使用排序的经验。

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

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
这里的文档展示了如何编写比较函数：

不要对DOM进行排序，而是对数据进行排序。这样，您可以在第一次呈现页面之前进行排序

创建使用要排序的属性名称和数据数组的函数。只需确保将数字数据转换为数字

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

const black='rgba（23,35,50,1）'
常数布朗='rgba（205164133，1）'
常量绿蓝='rgba（62171201,1）'
常量粉色='rgba（254156161,1）'
常数蓝='rgba（98189254,1）'
常量绿色='rgba（0254,0,1）'
/*函数对卡片进行排序*/
功能分类卡（属性、卡片）{
卡片.分类（功能（a，b）{
//如果相同，则返回0
如果（a[属性]==b[属性]）{
返回0；
}
//获取属性值
var a=一个[属性]；
VarB=b[属性]；
//正确处理数字
如果（属性=“价格”）{
//如果价格带为美元，则进行编号，
a=parseFloat（a.replace（/\$\124;，/g，“”）；
b=parseFloat（b.replace（/\$\124;，/g，“”）；
}
//正常排序返回
返回a>b？1:-1；
})
}
常数数据=[
{
主题:"食物",，
标题：“醒来，闻一闻咖啡”，
价格：‘$0.90’，
颜色：绿色，
覆盖：绿色，
img:'https://source.unsplash.com/featured/?coffee'
},
{
主题:"建筑学",，
标题：“全新的NASA办公室”，
价格：‘$0.19’，
颜色：黑色，
覆盖：黑色，
img:'https://source.unsplash.com/featured/?office'
},
{
主题:"旅游",，
标题：“体验撒哈拉沙漠”，
价格：‘$2.29’，
颜色：棕色，
覆盖层：棕色，
img:'https://source.unsplash.com/featured/?desert'
},
{
主题:"室内",，
标题：“9家你家需要的空气净化厂”，
价格：‘$0.09’，
颜色：绿蓝色，
覆盖：绿蓝色，
img:'https://source.unsplash.com/featured/?plants'
},
{
主题:"食物",，
标题：“一个月的糖排毒”，
价格：‘$0.99’，
颜色：粉红色，
覆盖层：粉红色，
img:'https://source.unsplash.com/featured/?sugar'
},
{
主题:"摄影",，
标题：“拍摄最小Instagram照片”，
价格：‘$0.29’，
颜色：蓝色，
覆盖：蓝色，
img:'https://source.unsplash.com/featured/?photography'
}
]
const cardText=document.querySelector（“#卡容器”）
让html=“”
//根据需要对数据进行排序
sortCards（“价格”，数据）；
第（一）部分数据{
html=html+`
${i.topic}
${i.title}
读取${i.price}
`  
}
卡德克斯