Добавление и удаление параметров URL на основе флажков

Question

У меня есть несколько фильтров, которые отображаются на моем веб-сайте в виде флажков. Каждый раз, когда кто-либо проверяет или снимает один из этих входов, я либо хочу добавить, либо удалить фильтр из / в URL. У меня это в основном работает, но проблема возникает при удалении последнего фильтра в списке.

Вот пример:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

$(function () {
    var colors = getUrlParameter('colors');
    var currentUrl = location.href;
    
    $('input[type="checkbox"]').change(function () {
      var inputVal = $(this).val();
      
      if (this.checked) {
        // Add filter to URL params
        colors = getUrlParameter('colors');
        if (!colors) {
          // No filters exist yet
          currentUrl += '?colors=' + inputVal;
        } else {
          // At least one filter exists
          currentUrl += ',' + inputVal;
        }
        console.log(currentUrl);
        window.history.pushState("object or string", "Title", currentUrl);
      } else {
        // Remove filter from URL params
        currentUrl = currentUrl.replace(inputVal + ',', '');
        console.log(currentUrl);
        window.history.pushState("object or string", "Title", currentUrl);
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <label><input type="checkbox" value="blue" />Blue</label>
  <label><input type="checkbox" value="red" />Red</label>
  <label><input type="checkbox" value="green" />Green</label>
</div>

Это работает, если цвет является первым (если есть или другие фильтры) или в середине списка фильтров, так как он соответствует моему replace(),интересно, как я могу сделать это динамически, чтобы он удалил как цвет, так и запятую, если необходимо, или удалил colors= в целом, если ни один не отмечен.

Например, если проверены все 3 цвета, URL будетвыглядит следующим образом:

http://example.net?colors=blue,red,green

Если затем удалить blue, оно должно выглядеть следующим образом:

http://example.net?colors=red,green

Если затем удалить зеленый, оно будет выглядеть следующим образом:

http://example.net?colors=red

И, наконец, удаление красного цвета будет выглядеть так:

http://example.net

Answer 1

Вы захотите разделить свои цвета на массив и затем снова объединить их в конце.

$(function () {
    var colors = getUrlParameter('colors');
    var currentUrl = location.href;

    $('input[type="checkbox"]').change(function () {
      var inputVal = $(this).val();
      var colorsQuery = getUrlParameter('colors') || "";
      //Split into an array after each `,`
      colors = colors.split(",");
      if (this.checked) {
        //Add to our current colors
        colors.push(inputVal);
      } else {
        // Remove from our current colors
        const index = colors.indexOf(inputValue);
        colors.splice(index, 1);
      }
      colorString = "";
      if(colors.length){
         //Merge back into a string with a `,`
         colorString = "?colors=" + colors.join(",")
      }
      window.history.pushState("object or string", "Title", currentUrl + colorString);
    });
});

В этом случае гораздо проще работать с массивами, поэтому мы просто разделяем и объединяют для преобразования в строку и из строки в массив.

Чтобы добавить ее просто, мы можем просто нажать на наш массив

Чтобы удалить цвет, который мы находимгде это находится в нашем массиве цветов. Затем с помощью splice удалите его из нашего массива.

Answer 2

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

Здесь вы увидите два основных события:

1. Обновление объекта на основетекущий флажок (привязка непосредственно к состоянию еще лучше!)
2. Генерация строки на основе текущих значений.

var colors = {
  'red': false,
  'blue': false,
  'green': false
};

update = function(color) {
  colors[color] = !colors[color];

}

getParams = function() {
  var setQuery = false;
  var expr = [];
  for (var color in colors) {
    if (colors[color]) {
      expr.push(color);
      setQuery = true;
    }
  }

  if (setQuery) {
    console.log("www.example.com" + "?colors=" + expr.join(","));
  } else {
    console.log("www.example.com");
  }
}

<input type="checkbox" onchange="update('red')" /> Red
<input type="checkbox" onchange="update('blue')" /> Blue
<input type="checkbox" onchange="update('green')" /> green

<button type="button" onclick="getParams()">Get params</button>