Question

我正在从数据库中读取大量可滑动数据，每个数据都带有唯一的ID，例如18056.

因此，使用JQuery ive创建了一个图形用户界面，显示了我输出到页面的每个可滑动值的滑块和标签，通常：

<html>

    <head>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                $(".slider").slider({

                    range: true,
                    min: 0,
                    max: 100,
                    values: [parseInt($("#from"+(this.id).split("slider")[1]).text()), parseInt($("#to"+(this.id).split("slider")[1]).text())],

                    slide: function( event, ui ) {

                        $("#from"+this.id.split("slider")[1]).text(ui.values[0]);
                        $("#to"+this.id.split("slider")[1]).text(ui.values[1]);
                    }

                    });             
            });
        </script>
    </head>

    <body>
        <label id="from0">10</label>-<label id="to0">90</label>
        <div id="slider0" class="slider"></div>
    </body>

</html>

它说我可以在第15行打电话给分数：......行:(任何人都有线索？

Answer 1

您应该使用.html()而不是.val()

$(".slider").slider(
{
 range: true,
 values: [ $("#label_"+this.id.split("slider_")[1]).html(), $("#label_"+this.id.split("slider_")[1]).html() ],
 ...

但最好只将标签值添加到<div>中，如下所示：

<div id="slider_18056" class="slider" data-value="10"></div>

然后您可以使用$(this).attr('data-value')

访问它

我不知道您使用的是什么滑块插件，但似乎无法确定选项中您想要的this。您可以尝试使用此方法：

$(document).ready(function(){
  $(".slider").each(function(){
    $(this).slider({
      range: true,
      min: 0,
      max: 100,
      values: [parseInt($("#from"+(this.id).split("slider")[1]).text()), parseInt($("#to"+(this.id).split("slider")[1]).text())],
      slide: function( event, ui ) {
        $("#from"+this.id.split("slider")[1]).text(ui.values[0]);
        $("#to"+this.id.split("slider")[1]).text(ui.values[1]);
      }
    });
  });
});

将滑块连接到标签

1 个答案: