Javascript 按价格、升序和降序排序时向标记添加动态文本

我已经设法在我的应用程序中添加了一个按钮，用于按价格对产品进行排序（不太了解javascript）

我希望它能更新按钮中的文本，向用户传达按价格排序是升序还是降序，例如： “按价格排序：递增”

以下是排序按钮的html：

    <button type="button" class="btn btn-outline-secondary">
      <a class="sortByPrice" href="#art-for-sale">Sort by Price</a>
    </button>

以下是第一个产品的html：

  <div class="row results">
    <div class="col-md-4 product">
      <div class="card mb-4 shadow-sm">
        <img src='images_organised_small/for_sale_small/3opera_house_night_500.jpg'>
        <div class="card-body">
          <span class="card-text title">Opera House Night</span>
          <p class="card-text price">$500</p>
          <p class="card-text description">insert artwork description here not too long but not too short!</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" onClick="window.open('https://www.paypal.me/meredithscott4/500');" class="btn btn-sm btn-outline-secondary">Buy</button>
              <button type="button" onClick="window.open('images_organised_large/for_sale_large/3opera_house_night_500.jpg');" class="btn btn-sm btn-outline-secondary">View</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

歌剧院之夜
500美元
在此处插入艺术品描述，不要太长，也不要太短
购买
看法
9分钟

下面是javascript

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;
  });
  ascending = ascending ? false : true;

  $('.results').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
var sorted=$（'.product'）.sort（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
升序=升序？假：真；
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

使用jQuery的

.html（）

：

var升序=false；
$（'.tab content'）。在（'click'，'.sortByPrice'，函数（）上{
var sorted=$（'.product'）.sort（函数（a，b）{
返回（升序）==
（convertToNumber（$（a）.find（'.price'）.html（））<
convertToNumber（$（b）.find（'.price'）.html（））？1:-1；
});
if（升序）{
上升=错误；
$（“.sortByPrice”）.html（“按价格排序：降序”）；
}否则{
升序=真；
$（“.sortByPrice”）.html（“按价格排序：升序”）；
}
$（'.results'）.html（已排序）；
});
var CONVERTONUMBER=函数（值）{
返回parseFloat（value.replace（'$'，''）；
}

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('$', ''));
}