Подставить значения к текущему url через запятую js

Question

let url = "https://test.com.ua/ru/catalog?id=1";

При выборе определенного значение и клике по нему значение добавляется в массив

    var items = [];
$('.attribute').on('click', function(){
    let link = window.location;
    var value = $(this).data('property_value_id');
    let active = $('.sort'+value).toggleClass('wc-layered-nav-term woocommerce-widget-layered-nav-list__item--chosen chosen');
    if (!$(this).hasClass('clicked')) {
        $(this).addClass('clicked');
        items.push(value);
    } else {
        $(this).removeClass('clicked');
        const index = items.indexOf(value);
        if (index > -1) {
            items.splice(index, 1);
        }
    }
    newUrl = link.href+"&sort="+items.toString();
    history.pushState(null, null, newUrl);

});

и у меня при каждом клике получиться ссылка

https://test.ua/ru/catalog?id=1&sort=4&sort=4,17

Подскажите как сделать что бы только добавлялись

https://test.ua/ru/catalog?id=1&sort=4,17 и так далее

Answer 1

заведите переменную с формированием запросов для гет параметров и формируйте её, и потом вставляйте в pushState. Сейчас пробелема в том, что вы всегда считаваете строку url браузера, а не постоянно её заново формируете.

Попробовать вместо location.href использовать связку location.origin и location.pathname и search формировать отдельно

Answer 2

Используйте URL и URLSearchParams для получения и изменения параметров в ссылке.

$(".attribute").on("click", function () {
  let url = new URL(window.location);
  let items = url.searchParams.get("sort") || [];

  var value = $(this).data("property_value_id");

  let active = $(".sort" + value).toggleClass(
    "wc-layered-nav-term woocommerce-widget-layered-nav-list__item--chosen chosen"
  );

  if (!$(this).hasClass("clicked")) {
    $(this).addClass("clicked");

    items.push(value);
  } else {
    $(this).removeClass("clicked");

    const index = items.indexOf(value);
    if (index > -1) {
      items.splice(index, 1);
    }
  }

  url.searchParams.set("sort", items.join(","));

  history.pushState(null, null, url.toString());
});

БЛОГ НА HUSL

Подставить значения к текущему url через запятую js

Ответы (2 шт):