Question

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

当页面第一次加载时，我想解析一个URL查询参数（如果存在），并使用结果来设置用户将看到的jQuery UI滑块的初始状态。这将允许人们使用此查询参数将URL字符串传递给其他人，然后其他人可以使用URL启动浏览器窗口并查看与发起者完全相同的设置（即滑块句柄位置）。如果URL中不存在查询参数，则页面应使用默认设置加载 - 仅使用代码。那么，如何从完整URL中获取查询字符串并在默认HTML显示之前解析它，并将滑块设置为固定的初始默认值？
我尝试过这么多答案的问题是如何以编程方式设置jQuery UI Sliders。我尝试在代码中的不同位置运行代码（请参阅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

以下是我的建议：

＆＃13;

var productObject = {
  "name": "Name",
  "price": 10,
  "description": "Product Description",
  "manufacturer": "Product Manufucturer"
};

var data = {
  prodName: productObject.name,
  prodPrice: productObject.price,
  prodDesc: productObject.description,
  prodManufucturer: productObject.manufacturer
 };
 
 console.log(JSON.stringify(data));

＆＃13;

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

＆＃13;

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

<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>

我们将从www.example.com/?sliders=C12获取参数值，然后将其解析为sliders，"C"和1。我将它们存储在一个数组中。

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

您也可以在解析中执行此操作：

[1, 2]

然后像这样使用：

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

希望有所帮助。

当页面使用URL查询字符串加载时，jQuery设置UI Slider

1 个答案: