¡Hola! He estado trabajando en mi sitio web y quiero hacer una clasificación por ASC y DSC en mis productos, soy nuevo en javascript y no entiendo mucho el punto, el script se copió de un tipo que también lo estaba solicitando. , pero no funcionó para mí. Aquí está mi script y html
var ascending = false; $('.tab-content').on('click', '.sortByPrice', function() { var sorted = $('.product').sort(function(a, b) { return (ascending == (convertToNumber($(a).find('.price').html()) < convertToNumber($(b).find('.price').html()))) ? 1 : -1; }); if (ascending) { ascending = false; $(".sortByPrice").html("Sort by Price: descending"); } else { ascending = true; $(".sortByPrice").html("Sort by Price: ascending"); } $('.results').html(sorted); }); var convertToNumber = function(value) { return parseFloat(value.replace('$', '')); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- WWI Minifigs --> <div class="small-container"> <h2 class="title" id="customminifigures">WWI Minifigs</h2> <a class="sortByPrice">Sort By Price</a> <div class="row"> <div class="col-4"> <a href="Edith Cavell.html"><img src="Products img/Edith Cavell/Edith Cavell.png"></a> <h4>Edith Cavell </h4> <p>$31.00 </p> </div> <div class="col-4"> <a href="WWI US Infantry.html" target="_blank"><img src="Products img/WWI US Infantry/WWI US Infantry.png"></a> <h4>WWI US Infantry </h4> <p>$26.00</p> </div> <div class="col-4"> <a href="WWI Ottoman Infantry.html"><img src="Products img/WWI Ottoman Infantry/WWI Ottoman Infantry.png"></a> <h4>WWI Ottoman Infantry</h4> <p>$29.00</p> </div> </div> </div>por favor estudia esto
Agregué clases al contenedor y a las pestañas, también agregué jQuery y bootstrap
let ascending = true; const convertToNumber = value => parseFloat(value.replace('$', '')); $('.small-container').on('click', '.sortByPrice', function() { var sorted = $('.product').sort(function(a, b) { const priceA = convertToNumber($(a).find('.price').html()) const priceB = convertToNumber($(b).find('.price').html()) return ascending ? priceA - priceB : priceB - priceA }); $(this).html(`Sort by Price: ${ascending ? "descending" : "ascending"}`); ascending = !ascending; $('.products').html(sorted); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- WWI Minifigs --> <div class="small-container"> <h2 class="title" id="customminifigures">WWI Minifigs</h2> <a class="sortByPrice">Sort By Price</a> <div class="row products"> <div class="col-4 product"> <a href="Edith Cavell.html"><img src="Products img/Edith Cavell/Edith Cavell.png"></a> <h4>Edith Cavell </h4> <p class="price">$31.00 </p> </div> <div class="col-4 product"> <a href="WWI US Infantry.html" target="_blank"><img src="Products img/WWI US Infantry/WWI US Infantry.png"></a> <h4>WWI US Infantry </h4> <p class="price">$26.00</p> </div> <div class="col-4 product"> <a href="WWI Ottoman Infantry.html"><img src="Products img/WWI Ottoman Infantry/WWI Ottoman Infantry.png"></a> <h4>WWI Ottoman Infantry</h4> <p class="price">$29.00</p> </div> </div> </div> $(document).ready(function() { $('#patientTable thead th').click(function(){ //Add parameter for remembering order type $(this).attr('data-order', ($(this).attr('data-order') === 'desc' ? 'asc':'desc')); //Add aditional parameters to keep track column that was clicked sorttable(this, $('#patientTable thead th').index(this)); }); }); function sorttable(header, index){ var $tbody = $('table tbody'); var order = $(header).attr('data-order'); $tbody.find('tr').sort(function (a, b) { var tda = $(a).find('td:eq(' + index + ')').text(); var tdb = $(b).find('td:eq(' + index + ')').text(); //Order according to order type return (order === 'asc' ? (tda > tdb ? 1 : tda < tdb ? -1 : 0) : (tda < tdb ? 1 : tda > tdb ? -1 : 0)); }).appendTo($tbody); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>