Jquery 如何在单独的隐藏字段中显示滑块的值？_Jquery

Jquery 如何在单独的隐藏字段中显示滑块的值？

jquery

Jquery 如何在单独的隐藏字段中显示滑块的值？,jquery,Jquery,这是代码 <!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;

这是代码

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


Papermashup.com | jQuery用户界面滑块演示
#容器{
背景：url（bg.jpg）！重要；
填充：100px 50px 0px 50px；
}
/*滑块背景*/
.滑块{
宽度：230px；
高度：11px；
背景：url（slider bg.png）；
位置：相对位置；
保证金：0；
填充：0 10px；
}
/*滑块按钮的样式*/
.ui滑块句柄{
宽度：24px；
高度：24px；
位置：绝对位置；
顶部：-7px；
左边距：-12px；
z指数：200；
背景：url（sliderbutton.png）；
}
/*显示滑块值的结果div*/
#滑块结果{
字体大小：50px；
高度：200px；
字体系列：Arial、Helvetica、无衬线字体；
颜色：#fff；
宽度：250px；
文本对齐：居中；
文本阴影：0 1px 1px#000；
字号：700；
填充：20px0；
}
/*这是填充栏的颜色*/
.ui小部件头{
背景：url（fill.png）没有重复；
高度：8px；
左：1px；
顶部：1px；
位置：绝对位置；
}
a{
大纲：无；
-moz轮廓样式：无；
}
$（'document'）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var username=$（'#hidden'）.val（）；
如果（用户名==“”）
用户名=50；
$.post（'comment.php'，{hidden:username}，函数（返回_数据）{
警报（返回数据）；
});
});
});
$（“.slider”）.slider({
动画：对，
射程：“分钟”，
价值：50，
民:10,，
最高：100，
步骤：10，
//这将更新隐藏的表单字段，以便我们可以使用表单提交数据
幻灯片：函数（事件、ui）{
$（“#滑块结果”）.html（ui.value）；
$（“#一”）。单击（函数（）{
$（'hidden1'）.attr（'value'，ui.value）；}）；
$（“#2”）。单击（函数（）{
$（'hidden2'）.attr（'value'，ui.value）；}）；
}
});

上面的代码生成一个双滑块。单击滑块时，值显示在隐藏字段中。。。。但我已经做了两个滑块点击第一个滑块的值显示在“hidden1”正确。如果单击第二个滑块，该值将再次显示在“hidden1”中，而不是“hidden2”…可能是pbm。我试了很多次，但都不知道这是否是个问题。可以使用jquery val来设置值，而不是attr

$("#Hidden1").val(ui.value);

不确定为什么要在幻灯片功能中设置单击事件。似乎您希望在幻灯片事件之外设置单击事件

不确定如何获得ID，我认为$（这个）可以工作

slide: function(event, ui) { 
  if($(this).attr("id") ==  "#Hidden1")
  {   $("#Hidden1").val(ui.value); }
  else
  {$("#Hidden2").val(ui.value);}
});

为两个滑块设置一个滑动功能。这些函数需要知道使用了哪一个。也许这就是你在点击事件中想要做的。

我想这就是你想要的

只需将输入字段更改回隐藏，并重置CSS中的背景值。

为什么不使用$（“#hidden1”）.val（ui.value）

您需要以其他方式创建滑块

比如：

$(".slider").each(
    $(this).slider({  
        ....
    });
);

对不起，我的英语不好

我想你不知道；不需要点击事件。