Question

我有一个Perl代码，用于检索30％的使用百分比。我编写了HTML，其中包含类进度条和perl中的值作为$ usage。我在jQuery中使用该类来显示页面中的进度条。但它不起作用。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>

$(function() {
    $( "#progressbar" ).progressbar( "value" );
});
</script>

<div class="progressbar" value=<% $usage_percentage %></div>

<%perl>
my $usage_percentage = 30;
</%perl>

请帮忙。提前谢谢。

Answer 1

您的代码存在一些问题。首先，您使用ID选择器$("#progressbar")，但HTML中没有任何内容具有该ID。改变

<div class="progressbar" ... >

到

<div id="progressbar" ... >

其次，value不是<div>代码的有效属性。将数据从Perl传递到HTML / JavaScript时，我建议使用HTML5 data-* attributes，例如

<div id="progressbar" data-percent-used="30"></div>

jQuery为访问data-*属性提供了convenient method：

var percentUsed = $( "#progressbar" ).data( "percent-used" ); // 30

请注意，您仍然可以在HTML4中使用data-*属性，只会将它们视为常规属性。

第三，您正在调用进度条get the value的方法，而不是设置它。变化

$( "#progressbar" ).progressbar( "value" );`

到

$( "#progressbar" ).progressbar({ value: 30 });

例如，

将值设置为30。

全部放在一起：

<script>
    $(function() {
        var container = $( "#progressbar" );
        container.progressbar({ value: container.data( "percent-used" ) });
    });
</script>

<div id="progressbar" data-percent-used="<% $usage_percentage %>"></div>

用于检查进度条级别并通过jQuery显示的Perl代码

1 个答案: