jQuery UI：滑块位置更改时的操作
Posted
技术标签:
【中文标题】jQuery UI：滑块位置更改时的操作【英文标题】：jQuery UI: Action when slider position changes 【发布时间】：2013-04-04 10:28:40 【问题描述】：我正在使用来自http://jqueryui.com/slider/#steps 的这个 jQuery UI 滑块 这是一个简单的滑块，有 3 个步骤（1、2 和 3）和一个显示图片的 div 元素（“id_1”）。所以我现在真正想要的是图片根据滑块的位置而变化。所以在位置“1”它显示一张图片，只要我将滑块移动到位置 2 或 3，这张图片就会改变。我该怎么做？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function ()
$("#slider").slider(
value: 100,
min: 1,
max: 3,
step: 1,
slide: function (event, ui)
$("#amount").val("$" + ui.value);
);
$("#amount").val("$" + $("#slider").slider("value"));
);
</script>
</head>
<body>
<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider"></div>
<div id="id_1" class="class_1"></div>
</body>
</html>
提前致谢！
【问题讨论】：
【参考方案1】：您只需要查看滑块的值，然后显示相应的图像。试试这样的：
slide: function (event, ui)
if (ui.value == 1)
$("#id_1")).attr("src", "image1.png");
else if (ui.value == 2)
$("#id_1")).attr("src", "image2.png");
else if (ui.value == 3)
$("#id_1")).attr("src", "image3.png");
并将 id_1 div 改为 img 标签：
<img id="id_1" class="class_1"></div>
【讨论】：
谢谢！ ui.value 正是我所需要的。完美运行！【参考方案2】：你的意思是像this（这是一个小提琴）。
我创建了一个数组来保存你需要的图像
var images = [
"http://cvcl.mit.edu/hybrid/cat2.jpg",
"http://www.helpinghomelesscats.com/images/cat1.jpg",
"http://oddanimals.com/images/lime-cat.jpg"
]; // replace these links with the ones pointing to your images
然后，当滑块移动时
slide: function (event, ui)
$("#amount").val("$" + ui.value);
$("#id_1").html("<img src=\"" + images[ui.value-1] + "\" />"); // subtracting 1 as the arrays first index is 0
并通过在页面加载时加载数组的第一张图片来完成它
$("#id_1").html("<img src=\"" + images[0] + "\" />"); // Load the first image on page load
【讨论】：
【参考方案3】：你只能在幻灯片事件中这样做。
<script>
$(function ()
$("#slider").slider(
value: 100,
min: 1,
max: 3,
step: 1,
slide: function (event, ui)
$("#amount").val("$" + ui.value);
if(ui.value == 1)
$('#imgSource').attr('src','1.png');
else if(ui.value == 2)
$('#imgSource').attr('src','2.png');
);
$("#amount").val("$" + $("#slider").slider("value"));
);
</script>
【讨论】：
只需在Div中添加一个id为imgSource的img。以上是关于jQuery UI：滑块位置更改时的操作的主要内容，如果未能解决你的问题，请参考以下文章