jQuery 使用 URL 查询字符串加载页面时设置 UI 滑块

Question

我在各种 SO 问题下搜索了许多有希望的答案，尝试了每一个 - 但无济于事。我缩小了我的网页，只关注我无法弄清楚的两个问题：

当页面第一次加载时，我想解析一个URL查询参数（如果存在），并使用结果来设置[=29=的初始状态] UI 用户将看到的滑块。这将使人们将带有此查询参数的 URL 字符串传递给其他人，然后他们可以使用 URL 启动浏览器 window 并查看完全相同的设置（即滑块手柄位置) 作为发起人。如果 URL 中不存在查询参数，页面应使用默认设置加载 - 只需使用代码。那么，如何从完整的 URL 中获取查询字符串并在默认 HTML 显示滑块设置为固定的初始默认值之前解析它？
我试过很多答案的问题是如何以编程方式设置 jQuery UI 滑块。我尝试在代码的不同位置运行编码（参见 alert() 和后面的两行）——但无论我把代码放在哪里，它都不会运行（没有警报），或者如果它运行，但滑块手柄从不改变它们的默认值。

我使用的库是 jQuery-1.12.4、jQueryUI-1.12.1 和 jQuery-3.1.1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div id="parameters">
        <ul id="sliders">
            <li id="climate-slider">
                <span class="slider-label">Climate: </span>
                <span class="slider-range">Hot to Cold</span>
                <div class="slider"></div>
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            var climateSteps = [
            "Hot",
            "Humid",
            "Dry",
            "Wet"];

        $(function () {
            $("#climate-slider .slider").slider({
                range: true,
                min: 0,
                max: 3,
                values: [0, 3],
                slide: function (event, ui) {
                    climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
                    if (ui.values[0] == ui.values[1]) {
                        /* if user selected a single value (not a range), adjust text to fit */
                        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
                    }
                    else {
                        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
                    }
                }
            })
        });

        $.noConflict();
        (function ($) {

        alert("setting sliders");
        $("#climate-slider").slider("values", 0, 1);
        $("#climate-slider").slider("values", 1, 2);

        })(jQuery);
    </script>
</body>
</html>

Answer 1

以下是我的建议：

$(function() {
  var climateSteps = [
    "Hot",
    "Humid",
    "Dry",
    "Wet"
  ];

  function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(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 : sParameterName[1];
      }
    }
  };

  function parseValue(s) {
    var head = s[0];
    var min = parseInt(s[1]);
    var max = parseInt(s[2]);
    var value = [head, min, max];
    return value;
  }

  $("#climate-slider .slider").slider({
    range: true,
    min: 0,
    max: 3,
    values: [0, 3],
    slide: function(event, ui) {
      climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
      if (ui.values[0] == ui.values[1]) {
        /* if user selected a single value (not a range), adjust text to fit */
        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
      } else {
        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
      }
    }
  });

  var urlValue = getUrlParameter("sliders");
  var slideValues = parseValue(urlValue);
  if (slideValues[0] === "C") {
    $("#climate-slider .slider").slider("values", [slideValues[1], slideValues[2]]);
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parameters">
  <ul id="sliders">
    <li id="climate-slider">
      <span class="slider-label">Climate: </span>
      <span class="slider-range">Hot to Cold</span>
      <div class="slider"></div>
    </li>
  </ul>
</div>

<script type="text/javascript">
</script>

此示例无法测试，因为此页面的 URL 不正确。我写了这个例子来处理你提供的测试 URL:

www.example.com/?sliders=C12

我们将从sliders中获取参数值，然后将其解析为"C"、1和2。我将它们存储在一个数组中。

然后我们可以通过传入数组 [1, 2] 将滑块的 values 设置为这些。查看更多：http://api.jqueryui.com/slider/#method-values

你也可以在解析中这样做：

function parseValue(s) {
  var head = s[0];
  var min = parseInt(s[1]);
  var max = parseInt(s[2]);
  var value = [head, [min, max]];
  return value;
}

然后像这样使用：

$("#climate-slider .slider").slider("values", sliderValues[1]);

希望对您有所帮助。

jQuery 使用 URL 查询字符串加载页面时设置 UI 滑块

jQuery set UI Slider when page loads using URL query string

jquery

jquery-ui

jquery-ui-slider