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

【问题标题】：jQuery set UI Slider when page loads using URL query string使用 URL 查询字符串加载页面时 jQuery 设置 UI 滑块
【发布时间】：2018-07-13 13:15:13
【问题描述】：

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

当页面第一次加载时，我想解析一个 URL 查询参数（如果存在），并使用结果来设置用户将看到的 jQuery UI 滑块的初始状态。这将允许人们将带有此查询参数的 URL 字符串传递给其他人，然后他们可以使用该 URL 启动浏览器窗口并看到与发起者完全相同的设置（即滑块句柄位置）。如果 URL 中不存在查询参数，则应使用默认设置加载页面 - 仅使用代码。那么，如何从完整的 URL 中获取查询字符串并在默认 HTML 显示之前对其进行解析，并将滑块设置为其固定的初始默认值？
我尝试过的有很多答案的问题是如何以编程方式设置 jQuery UI 滑块。我尝试在代码中的不同位置运行代码（请参阅 alert() 和以下 2 行） - 但无论我将代码放在哪里，它要么根本不运行（没有警报），要么如果它运行运行，但滑块句柄永远不会改变其默认值。

我使用的库是 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>

【问题讨论】：

需要一个您从中读取值的 URL 示例。然后用 jQuery 捕捉它，然后在设置 Slider 时使用这些值就很简单了。
另外，您的示例加载了太多库。要么使用 jQuery 1.12.4 要么使用 jQuery 3.1.1，但不要同时使用两者。无论您使用哪一个，都应该在 jQuery UI 库之前加载。
URL 格式如下：www.example.com/?sliders=C12 - 表示气候 ("C") 滑块的初始句柄值应分别为 1 和 2。只需在 URL 中再添加 3 个字符，就可以指定更多的初始滑块位置 - 当然，下一个滑块以“C”以外的字母开头，依此类推。我会在 alert() 代码之后使用 2 行来设置它们，但似乎无法将该代码放在哪里使其工作。我看到一些关于从 URL 获取特定查询值的 SO 文章，但它们似乎都是基于正则表达式的复杂函数，无法正常工作。
很高兴您提到了 jQuery 库导入。也许我应该发布另一个关于此的问题 - 但是当我试图只删除 jquery-3.1.1 库（这似乎是个奇怪的人）时，根本不会出现任何 jQuery UI 元素。这对我来说从来没有意义，但是在发现使用所有四个包含神奇地使一切正常后，我就放弃了。我可能会尝试清理它的任何想法也将不胜感激，尽管对我来说不是最重要的事情，因为它按原样工作。
这是我对读取 URL 数据的建议：stackoverflow.com/questions/19491336/…

标签： jquery jquery-ui jquery-ui-slider

【解决方案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]);

希望对您有所帮助。

【讨论】：

您提供了很棒的代码 - 问题 #1 已由您解决 - URL 解析工作正常。我在想我的代码中存在结构性问题（并且缺乏对 jQuery 的理解），导致在解析 URL 后滑块仍然没有更新。我的 JS 代码以：任何你能指出我的想法或资源将不胜感激。
@JeffRoloff 不清楚，但我怀疑它来自使用 $.noConflict()。不知道你为什么在这种情况下使用它。在我的示例中，它可以工作，没有 $.noConflict()。