我正在使用jquery-ui滑块来创建从强烈不同意到强烈同意的连续比例(样本 - http://enscholar.com/slider/)。我创建了一个对象来保存我想要显示的不同字符串值,但我想将数值存储到数据库中 - 而不是字符串。
这是我到目前为止所做的:
var p = {
0: "Strongly Disagree",
5: "Strongly Disagree",
10: "Strongly Disagree",
15: "Strongly Disagree",
20: "Strongly Disagree",
25: "Disagree",
30: "Disagree",
35: "Disagree",
40: "Disagree",
45: "Neutral",
50: "Neutral",
55: "Neutral",
60: "Neutral",
65: "Agree",
70: "Agree",
75: "Agree",
80: "Agree",
85: "Strongly Agree",
90: "Strongly Agree",
95: "Strongly Agree",
100: "Strongly Agree"
};
$( ".slider" ).slider({
animate:true,
range: "min",
value:50,
min: 0,
max: 100,
step: 5,
slide: function( event, ui ) {
$( "#slider-result" ).val(p[ui.value]);
}
});
$("#slider-result").val(p[$(".slider").slider("value")]);
$( ".slider-2" ).slider({
animate:true,
range: "min",
value:50,
min: 0,
max: 100,
step: 5,
slide: function( event, ui ) {
$( "#slider-result-2" ).val(p[ui.value]);
}
});
$("#slider-result-2").val(p[$(".slider-2").slider("value")]);
});
从那里我只是在输入中收集价值 - 我感觉这是问题,但我不知道从这里去哪里。
<input type="text" id="slider-result" name="career" readonly/>
有关如何向用户显示字符串,但将数值存储到数据库的任何想法?
非常感谢任何帮助!!
答案 0 :(得分:0)
根据输入滑块的值,我使用if语句将范围链接到特定的#message:
$(function() {
$( ".slider" ).slider({
animate:true,
range: "min",
value:0,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#slider-result" ).val(ui.value);
if (ui.value >= 0 && ui.value < 20) {
$("#message").text("I could care less.");
} else if (ui.value >= 20 && ui.value < 40) {
$("#message").text("Loving what you do is overrated...");
} else if (ui.value >= 40 && ui.value < 60) {
$("#message").text("I guess it might be...");
} else if (ui.value >= 60 && ui.value < 80) {
$("#message").text("I want to love what I do.");
} else {
$("#message").text("I NEED to love my career!");
}
}
});
然后在显示滑块时,您可以调用id =“message”来显示字符串:
<div id="sliders">
<form method="post" action="results.php">
How important is it that you find a career that you love and are good at?
<input type="hidden" id="slider-result" name="career" readonly/>
<div class="slider"></div>
<p id="message"><img src="images/slide.png" /></p>
</form>
</div>