使用 URL 查询字符串加载页面时 jQuery 设置 UI 滑块
Posted
技术标签:
【中文标题】使用 URL 查询字符串加载页面时 jQuery 设置 UI 滑块【英文标题】：jQuery set UI Slider when page loads using URL query string 【发布时间】：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 数据的建议：***.com/questions/19491336/… 【参考方案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()。以上是关于使用 URL 查询字符串加载页面时 jQuery 设置 UI 滑块的主要内容，如果未能解决你的问题，请参考以下文章
我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串？
如何在页面加载时处理支持 bean 中的 GET 查询字符串 URL 参数？
如何在页面加载时处理辅助bean中的GET查询字符串URL参数？