排序功能似乎不起作用。 (Javascript)

Question

我希望实现价格排序功能，用户可以使用下拉菜单进行排序； 'high to low'，或'low to high'。

我要按价格排序的项目是 w3 容器，因为每个都是它们自己的产品。

相反，什么都没有发生。当我从下拉菜单中 select 'high to low' 或 'low to high' 时，我不确定这是为什么。

我将在下面包含相关代码。

$(document).on("change", ".price-sorting", function() {

    var sortingMethod = $(this).val();

    if(sortingMethod == 'l2h')
    {
        sortProductsPriceAscending();
    }
    else if(sortingMethod == 'h2l')
    {
        sortProductsPriceDescending();
    }

});

function getAmount(price){
  return parseFloat(price.replace('$', ''));
}


function sortProductsPriceAscending()
{
    var products = $('.w3-container');
    products.sort(function(a, b){ return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text()) });
    $(".products").html(products);

}

function sortProductsPriceDescending()
{
    var products = $('.w3-container');
    products.sort(function(a, b){ return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text()) });
    $(".products").html(products);

}

<div style="top:inherit; padding-left:1050px; margin-top: 0px; ">
  <select class="price-sorting type-regular" name="price-sorting">
    <option selected disabled>Sort by price:</option>
    <option value="l2h">Low to high</option>
    <option value="h2l">High to low</option>
  </select>
</div>



<div id="products" class=" w3-row w3-grayscale" style="width:100%;" >
      
 <div class="w3-col l3 s6">
       <a href="#"><div class="w3-container" id="Amethyst">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
           <p>Amethyst<br><span class="price">£45.00</span></p>
      </div></a>
     
      <a href="#"><div class="w3-container" id="Placeholder1">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
          <p>Placeholder1<br><span class="price">£0.00</span></p>
      </div></a>
  </div> 

    <div class="w3-col l3 s6">
      <a href="#"><div class="w3-container" id="Bloodstone">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
          <p>Bloodstone<br><span class="price">£50.00</span></p>
          </div> </a>
        
      <a href="#"><div class="w3-container" id="Placeholder2">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
          <p>Placeholder2<br><span class="price">£0.00</span></p>
          </div> </a>
    </div>

    <div class="w3-col l3 s6">
      <a href="#"><div class="w3-container" id="Placeholder3">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder3<br><span class="price">£0.00</span></p>
          </div> </a>
        
      <a href="#"><div class="w3-container" id="Placeholder4">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder4<br><span class="price">£0.00</span></p>
          </div> </a>
    </div>

    <div class="w3-col l3 s6">
      <a href="#"><div class="w3-container" id="Placeholder5">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder5<br><span class="price">£0.00</span></p>
          </div> </a>
        
      <a href="#"><div class="w3-container" id="Placeholder6">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder6<br><span class="price">£0.00</span></p>
          </div> </a>
    </div>
  </div>

如果我可以添加任何其他内容以提供更多帮助，我很乐意这样做。感谢您的帮助。

Answer 1

你的种类被英镑符号噎住了。

字符串没有减号运算符。它转换为数字，数字始终为零，因为文本以井号而不是数字开头。

“getAmount”函数正在删除美元符号，而不是英镑符号。

此外，您不能对 jquery 数组对象进行排序。您可以使用 .toArray() 或 $.makeArray()

Answer 2

下面这个“已更正”的代码段现在可以正常工作，但有很多重复可以删除。另外，我突然想到，您不仅在对 div 进行排序，而且还在破坏其中包含一些 <a> 元素的初始结构。

我改的行是：

return parseFloat(price.replace(/[£$€]/,'')); // also remove £

和

products.appendTo("#products");  // the target selector refers to an ID

$(document).on("change", ".price-sorting", function() {

  var sortingMethod = $(this).val();

  if (sortingMethod == 'l2h') {
    sortProductsPriceAscending();
  } else if (sortingMethod == 'h2l') {
    sortProductsPriceDescending();
  }

});

function getAmount(price) {
  return parseFloat(price.replace(/[£$€]/,''));
}


function sortProductsPriceAscending() {
  var products = $('.w3-container');
  products.sort(function(a, b) {
    return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text())
  });
  products.appendTo("#products");
}

function sortProductsPriceDescending() {
  var products = $('.w3-container');
  products.sort(function(a, b) {
    return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text())
  });
  products.appendTo("#products");
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="top:inherit; padding-left:20px; margin-top: 0px; ">
  <select class="price-sorting type-regular" name="price-sorting">
    <option selected disabled>Sort by price:</option>
    <option value="l2h">Low to high</option>
    <option value="h2l">High to low</option>
  </select>
</div>



<div id="products" class=" w3-row w3-grayscale" style="width:100%;">

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Amethyst">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br><span class="price">£45.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder1">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br><span class="price">£0.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Bloodstone">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Bloodstone<br><span class="price">£50.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder2">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder2<br><span class="price">£10.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Placeholder3">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder3<br><span class="price">£0.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder4">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder4<br><span class="price">£35.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Placeholder5">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder5<br><span class="price">£5.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder6">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder6<br><span class="price">£10.00</span></p>
      </div>
    </a>
  </div>
</div>

第二次更新：
我现在更改了我的第二个片段以重现父 <div class="w3-col l3 s6">:

中两个 <a>-wrapped <div> 的原始结构

const cont = $("#products"), products = $('.w3-container');
$(document).on("change", ".price-sorting", function() {
  const fact=$(this).val()=='l2h'?1:-1,  // sort direction
    prods=products.sort((...arr)=>fact*arr.map(e=>$(".price",e).text().replace(/[£$€]/,''))
                                          .reduce((a,c)=>a-c) ).get(); // sorted DOM el. array
  cont.empty()
  while (prods.length) {
   const div= $('<div class="w3-col l3 s6">');
   [prods.shift(),prods.shift()].forEach(el=> el && div.append($('<a href="#"></a>').append(el)))
   cont.append(div);
  }
});

.as-console-wrapper {max-height:100% !important}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="top:inherit; padding-left:20px; margin-top: 0px; ">
  <select class="price-sorting type-regular" name="price-sorting">
    <option selected disabled>Sort by price:</option>
    <option value="l2h">Low to high</option>
    <option value="h2l">High to low</option>
  </select>
</div>



<div id="products" class=" w3-row w3-grayscale" style="width:100%;">

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Amethyst">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br><span class="price">£45.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder1">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br><span class="price">£0.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Bloodstone">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Bloodstone<br><span class="price">£50.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder2">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder2<br><span class="price">£10.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Placeholder3">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder3<br><span class="price">£0.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder4">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder4<br><span class="price">£35.00</span></p>
      </div>
    </a>
  </div>

  <div class="w3-col l3 s6">
    <a href="#">
      <div class="w3-container" id="Placeholder5">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder5<br><span class="price">£5.00</span></p>
      </div>
    </a>

    <a href="#">
      <div class="w3-container" id="Placeholder6">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder6<br><span class="price">£10.00</span></p>
      </div>
    </a>
  </div>
</div>

更新：
为什么排序过程中原来的布局被“破坏”了？

在原始 HTML 中，div.w3-container 元素被 <a> 元素包围，并且每两个元素都被一个父元素 <div class="w3-col l3 s6"> 包围。排序过程提取 div.w3-container 元素并将它们一个接一个地直接放入目标元素 <div id="products"> - 没有它们原始的“父” <a> 和 <div class="w3-col l3 s6"> 元素。

排序功能似乎不起作用。 (Javascript)

Sort feature doesn't seem to work. (Javascript)

html

javascript

sorting

jquery