这是代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | jQuery UI Slider Demo</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css">
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}
/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}
/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}
/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}
a {
outline:none;
-moz-outline-style:none;
}
</style>
<script type="text/javascript">
$('document').ready(function(){
$('#submit').click(function(){
var username=$('#hidden').val();
if(username=="")
username = 50;
$.post('comment.php',{hidden:username},function(return_data){
alert(return_data);
});
});
});
</script>
</head>
<body>
<div class="slider" id="one"></div>
<div class="slider" id="two"></div>
<div id="slider-result"></div>
<form>
<input type="hidden" id="hidden1"/>
<input type="hidden" id="hidden2"/>
<input type="button" id="submit" value="submit"/>
</form>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 50,
min: 10,
max: 100,
step: 10,
//this updates the hidden form field so we can submit the data using a form
slide: function(event, ui) {
$( "#slider-result" ).html( ui.value );
$("#one").click(function(){
$('#hidden1').attr('value', ui.value);});
$("#two").click(function(){
$('#hidden2').attr('value', ui.value);});
}
});
</script>
</body>
</html>
上面的代码生成了一个两个 slider 。当单击 slider 时，该值显示在隐藏字段中......但我在单击第一个 slider 时制作了两个 slider ，该值正确显示在“hidden1”中。如果我单击第二个 slider ，该值将再次显示在“hidden1”中，而不是“hidden2”中......可能是 pbm 。我尝试了很多次但无法弄清楚??????
最佳答案
关于jquery - 如何获取在单独的隐藏字段中显示的 slider 的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6458327/