javascript - 可复用函数JS
问题描述
我有在点击按钮后对元素进行排序的功能。在网站上,我有几个按钮负责对不同元素进行排序。我的功能看起来像这样
const sort = () => {
var list = document.querySelector('.list');
console.log([...list.children]);
[...list.children]
.sort((a,b)=>a.querySelector('.video-count').innerText.replace(/,/g, '') - b.querySelector('.video-count').innerText.replace(/,/g, ''))
.map(node=>list.appendChild(node))
}
document.getElementById("video").addEventListener('click', sort);
如果我想对其他元素进行排序,那么在上面的函数中我只需要更改这个元素a.querySelector('.video-count')
(添加新类)
这是我的 HTML 代码
<ul class="list">
<li class="channel-wrraper">
<div class="channel-statistic">
<div class="statistic-wrraper">
<span class="statistic-name">subscribers:</span>
<span class="subscirber-count">${subscriberCount}</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">videos:</span>
<span class="video-count">${videoCount}</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">views:</span>
<span class="veiw-count">${viewCount}</span>
</div>
</div>
</li>
</ul>
我怎么解决这个问题?
解决方案
使用函数发生器
const sort = (selector) => () => {
var list = document.querySelector('.list');
console.log([...list.children]);
[...list.children]
.sort((a, b) => a.querySelector(selector).innerText.replace(/,/g, '') - b.querySelector(selector).innerText.replace(/,/g, ''))
.map(node => list.appendChild(node))
}
document.getElementById("sub").addEventListener('click', sort('.subscriber-count'));
document.getElementById("video").addEventListener('click', sort('.video-count'));
document.getElementById("view").addEventListener('click', sort('.view-count'));
.as-console-wrapper{max-height:2em!important;}
<ul class="list">
<li class="channel-wrraper">
<div class="channel-statistic">
<div class="statistic-wrraper">
<span class="statistic-name">subscribers:</span>
<span class="subscriber-count">50</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">videos:</span>
<span class="video-count">5</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">views:</span>
<span class="view-count">1,000,000</span>
</div>
</div>
</li>
<li class="channel-wrraper">
<div class="channel-statistic">
<div class="statistic-wrraper">
<span class="statistic-name">subscribers:</span>
<span class="subscriber-count">5000</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">videos:</span>
<span class="video-count">999</span>
</div>
<div class="statistic-wrraper">
<span class="statistic-name">views:</span>
<span class="view-count">500,000</span>
</div>
</div>
</li>
</ul>
<button id="sub">subs</button>
<button id="video">videos</button>
<button id="view">views</button>
推荐阅读
- php - 重定向保留查询字符串
- msal - AADSTS700023:客户端断言受众声明与 ConfidentialClientApplication 中的领域颁发者错误不匹配
- python - Sphinx autodoc复制模块名称和函数名称
- sql - 数百万条记录的 SQL Server 表的性能改进
- mysql - 如何在 MariaDB 10.1.37 / Ver 15.1 中进行适当的约束?
- javascript - 如何遍历对象字面量数组,连接共享重复 id 的值?
- .net - .NET 标准 2.0 数据.OleDb
- java - 在真实设备中显示通知的问题
- r - 为什么手动计算的 ggplot2 95%CI 和预测 95%CI 不同?
- vue.js - VueJS 在共享组件中声明 props 的位置