【问题标题】:Value on a ui sliderui 滑块上的值
【发布时间】:2012-12-01 10:20:01
【问题描述】:

我有一个滑块的代码并且结构显示正确但是当我移动滑块时,不要在输入框“数量”内显示答案的值,出现“未定义”,我不知道为什么,因为当您检查时,您可以看到 div 滑块在标签名称中有一个值。我也尝试过使用 html 标签“值”,但也没有用。我能做什么?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>  Questionnaire </title>
    <meta name="Description" content="Questionnaire on business model" />
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    
    <script src="jquery-ui-1.9.2.js"></script>
    <script src="factaris.js"></script> 
    <link rel="stylesheet" href="STYLE.css" type="text/css" media="screen" />
    <script>
    jQuery(document).ready(function(){

        ///SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!

        $( "#slider" ).slider({ 
        slide: function( event, ui ) {
            //$( "#amount" ).val( "$" + ui.value );  // show range 0-100 without ini values !!!!!
            // $( "#amount" ).val( "$" + this.value  ); //show undefined
            //   $( "#amount" ).val( "$" + 8); // show 8 all time
            $( "#amount" ).val( "$" + ui.name );    
        }
        });     
    });
    </script>
</head>
<body>
<div id="sizer">
    <form id= "formID"  name="formID" class="formular"   method="post" action= "<?= $url = "QUESTIONAREFINISHING.php"; ?>" accept-charset="utf-8">
    <div id="questionare" >
    <!--SLIDER-->   

    <?php if($row_questionset['Constructor']=="Slider"){?>
    <div>
        <label class="desc" value= "<?php $row_questionset['QuestionIDFKPK'];?>">
        <?php echo $row_questionset['QuestionValue']; ?>
        </label>
    </div>                                                          
    <?php while ($row_Answer=mysql_fetch_array($AnswersValue)){ ?>  
    <p>
        <label for="amount"><?php echo $row_questionset['QuestionValue']; ?></label>
        <input type="text" id="amount" name="amount"  />
    </p>

    <div id="slider" name="<?php echo $row_Answer['AnswerValue']; ?>" ></div>

    <?php } // End while loop ?>
    <?php } //End slider row ?> 
    <!--/SLIDER-->  
    </div>   
</form>
</div>   
</body>    
</html>

【问题讨论】:

  • 请您删除所有空行好吗?

标签: php javascript html jquery-ui slider


【解决方案1】:

如果您想设置一个初始值,您需要在调用slider 方法时设置它(使用JS - 而不是HTML)。

$("#slider).slider({
    max: slideMax,
    min: slideMin,
    value: slideInit,

// To set the value to the `#amount` element, use the following `slide` event
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );    
    }
});

【讨论】:

    【解决方案2】:

    使用滑块值参数,如果您想读取更改滑块或/和滑块上的值,请使用滑块的事件方法:

    function outputValue(sliderDom) {
        alert($(sliderDom).slider('value'));
    };
    
    $( "#slider" ).slider({
        //... your init
        slide: function(){
            outputValue(this);
        },
        change: function(){
            outputValue(this);
        }
    });
    

    编辑

    要解决您的价值问题,试试这个

    $('#slider').slider({
        //..
        min: 0,
        max: 100000 //or more
    });
    

    【讨论】:

    • 奇怪的是,当我把它只显示为 0-100 范围内的值数字时,不应该是这样。它应该显示我的数据库的值,因为我在这里说
      并且适用于其他结构(单选按钮,复选框,文本字段..)所以问题出在滑块上。
    • @user1901142 使用minmax 选项
    • 那只是增加范围,我希望在输入 armount 上显示我的表值,而不是该范围之间的数字。我的问题是。
    【解决方案3】:

    要读取 jQuery UI Slider 的值,您需要在有问题的元素上调用滑块方法,并将 'value' 作为参数,如下所示:

    $( "#slider" ).slider( "value" );
    

    【讨论】:

    • 我尝试过类似幻灯片:function(event, ui) { $("#slider").slider("value"); var valueslider= ui.value; $( "#amount" ).val( "$" + valueslider); } 但不起作用。我用错了吗?
    • 是的,你用错了。 $( "#slider" ).slider( "value" ); 将返回该值。所以你应该按照var valueslider = $( "#slider" ).slider( "value" );的方式使用它
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多