Hi! I've been working on my website and i wanna make sorting by ASC and DSC in my products, im new at javascript and i don't understand a lot of the point, the script is copied from a guy who was asking for it too, but it didn't work out for me. Here is my Script and 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 >
  <h2  id="customminifigures">WWI Minifigs</h2>
  <a >Sort By Price</a>
  <div >
    <div >
      <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 >
      <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 >
      <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>

CodePudding user response：

Please study this

I added classes to the container and to the tabs, added jQuery and bootstrap too

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


<!-- WWI Minifigs -->
<div >
  <h2  id="customminifigures">WWI Minifigs</h2>
  <a >Sort By Price</a>
  <div >
    <div >
      <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 >
      <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 >
      <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>

CodePudding user response：

$(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>