Javascript 带有按钮功能的图像排序_Javascript_Html_Css

Javascript 带有按钮功能的图像排序

javascript html css

Javascript 带有按钮功能的图像排序,javascript,html,css,Javascript,Html,Css,我有两个按钮的功能按最相似和最新的排序这只是模拟，可以硬编码如何将按钮与功能链接这是其中一个源代码的源代码 <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> </head> <body> <button onclick="function1">Sort Most Li

我有两个按钮的功能按最相似和最新的排序这只是模拟，可以硬编码

如何将按钮与功能链接

这是其中一个源代码的源代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8" />
</head>
<body>
<button onclick="function1">Sort Most Like</button>
<button onclick="function2">Sort Most Recent</button>
    <div id="app"></div>
    <script src="src/index.js">
    </script>
</body>
</html>

<script>



const imgArr = [
  { src: "https://unsplash.it/300/225?image=0", Recent: "24/1/2018", Likes: 6 },
  { src: "https://unsplash.it/300/225?image=0", Recent: "24/3/2018", Likes: 2 },
  { src: "https://unsplash.it/300/225?image=0", Recent: "25/1/2018", Likes: 3 },
  { src: "https://unsplash.it/300/225?image=0", Recent: "24/2/2018", Likes: 1 },
];

const html = imgArr.sort((a, b) => {
return a.Likes + b.Likes
}).map(imageItem => {
  return `<figure class="einzel"><img alt="Mitglieder" src=${
    imageItem.src
  } style="width: 315px; height: 250px;">
      <figcaption>Name: ${imageItem.Name}<br>
        <span>Likes: ${imageItem.Likes}</span></figcaption>
  </figure>`;
});


document.getElementById("app").innerHTML = html;



</script>


试验
有点像
排序最近的
康斯坦因加尔=[
{src:“https://unsplash.it/300/225?image=0，最近的：“2018年1月24日”，如：6}，
{src:“https://unsplash.it/300/225?image=0，最近的：“2018年3月24日”，如：2}，
{src:“https://unsplash.it/300/225?image=0，最近的：“2018年1月25日”，如：3}，
{src:“https://unsplash.it/300/225?image=0，最近的：“2018年2月24日”，如：1}，
];
常量html=imgArr.sort（（a，b）=>{
返回a.喜欢+b.喜欢
}).map（imageItem=>{
返回`
名称：${imageItem.Name}

喜欢：${imageItem.Likes}
`;
});
document.getElementById（“app”）.innerHTML=html；

下面的代码包括按喜欢按升序对条目进行排序的功能

const imgArr=[{
src:“https://unsplash.it/300/225?image=0",
最近：“2018年1月24日”，
喜欢：6
},
{
src:“https://unsplash.it/300/225?image=0",
最近：“2018年3月24日”，
喜欢：2
},
{
src:“https://unsplash.it/300/225?image=0",
最近：“2018年1月25日”，
喜欢：3
},
{
src:“https://unsplash.it/300/225?image=0",
最近：“2018年2月24日”，
喜欢：1
},
];
/*Gemeric函数在屏幕上显示数组内容*/
常量init=（ar）=>ar.map（el=>{
返回`
最近的：${el.Recent}

喜欢：${el.Likes}
`;
});
常数sortByLikes=（a，b）=>{
如果（a.Likes==b.Likes）{
返回0；
}
返回a.喜欢>b.喜欢？1:-1；
};
/*生成按类数排序的数组*/
常量函数1=（）=>{
document.getElementById（“app”）.innerHTML=init（[…imgArr].sort（sortByLikes））；
}
document.getElementById（“app”）.innerHTML=init（imgArr）
最相似的排序
排序最近的
在标签中给出函数实现。例如：function1（）{/*您的代码在这里*/}
谢谢，它工作起来很有魅力。如何在对象中存储而不是硬代码？。顺便说一句，我使用的是帕格格式。