为商店产品创建按高/低价目表排序

Creating Sort by high/low price list for store products?

本文关键字：价目表 排序 创建      更新时间：2023-09-26

这是我的HTML示例，但明显缩短了：

<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>

我的 JavaScript 感谢这里的一个用户帮助我，它删除了 $ 并对价格进行排序，然后记录到控制台，如您所见。

function myFunction() {
    return Array.prototype.slice.call(document.getElementsByClassName("price"))
        .map(function(el){
            return Number(el.innerHTML.replace(/'$/, ""));
        })
        .sort();
}
console.log(myFunction());

问题是，当我使用小提琴时它工作正常，但当我尝试将其实现到我的实际网站时则不行，数组是空的。

所以基本上我想知道如何将排序的项目实际输出到屏幕上，以及如何在myFunction中反转排序顺序？

下面是一个工作示例。您可以通过传递一个函数作为.sort()的第一个参数来反转排序顺序，该参数告诉 JavaScript 哪个项目先出现。在这里，我在该函数的 return 语句中交换了a和b，这颠倒了排序顺序。然后，使用一个简单的循环，我以新顺序将元素追加回它们的父元素。

您

缺少的是最后一部分，您没有将排序后的元素添加回文档中，它们在排序完成后留在内存中，没有任何反应。

function myFunction(){
  var elements = [].slice.call(document.getElementsByClassName("price"));
  elements.sort(function(a,b){
    return parseFloat(b.innerHTML.substring(1)) - parseFloat(a.innerHTML.substring(1));
  });
  for (var i=0; i<elements.length; i++)
    elements[i].parentNode.appendChild(elements[i]);
}
myFunction();
<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>

简单的方法，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2 class="price">$881.99</h2>
    <h2 class="price">$715.05</h2>
    <h2 class="price">$651.95</h2>
    <h2 class="price">$921.10</h2>
    <script>
        var array = Array.slice(document.getElementsByClassName("price"));
        array.sort(function (a, b) {            
            return parseFloat(a.innerHTML.replace("$", "")) - parseFloat(b.innerHTML.replace("$", ""));
        });
        array.map(function(e){
           e.parentNode.appendChild(e); 
        });
    </script>
</body>
</html>

此方法用于反转数组。

<body>
<h2 class="price">$881.99</h2>
<h2 class="price">$715.05</h2>
<h2 class="price">$651.95</h2>
<h2 class="price">$921.10</h2>
<script>
function myFunction() {
    var temp;
     temp = Array.prototype.slice.call(document.getElementsByClassName("price"))
        .map(function(el)
        {
            temp = Number(el.innerHTML.replace(/'$/, ""));
            return temp;
        })
        .sort();
    return temp.reverse();
}
console.log(myFunction());  
</script>
</body>
相关文章：