Question

这是代码.......

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

上面的代码生成一个两个滑块。当单击滑块时，该值显示在隐藏字段....但是我在点击第一个滑块时制作了两个滑块，该值正确显示在“hidden1”中。如果我单击第二个滑块，该值将再次显示在“hidden1”而不是“hidden2”中...可能是pbm。我尝试了不同的时间，但无法弄清楚?????

Answer 1

我认为这就是你想要的

http://jsfiddle.net/bU6EV/12/

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

Answer 2

不确定这是否是一个问题。可以使用jquery val来设置值而不是attr。

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

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

不确定如何获取ID，我认为$（this）会起作用。

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

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

Answer 3

为什么不使用$（“＃hidden1”）。val（ui.value）; ？

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

类似的东西：

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

抱歉我的英语不好！

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

3 个答案: