jQueryでプログレスバーの値を動的に設定する方法は？

私のチュートリアルのウェブサイトでは、jQuery UIのプログレスバーを棒グラフとして使うのではなく、チュートリアルを通してどれだけ遠くにいるかを表示するためのイメージとして表示します。例：jQueryでプログレスバーの値を動的に設定する方法は？

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: 50 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar"></div> 
 
    <span style="text-align: center">50% complete</span> 
 
    Lots more stuff here 
 
</body>

しかし、私はそれがやりたいことは、異なる値を持つ複数のプログレスバーを持っています。私は、プログレスバーのクラスとその値のカスタム属性を持っています。このような何か：

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: $(.progressbar).attr("data-progress-value"); 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar" data-progress-value="33"></div> 
 
    <span style="text-align: center">33% complete</span> Lots more stuff here 
 
    <div class="progressbar" data-progress-value="67"></div> 
 
    <span style="text-align: center">67% complete</span> More stuff here 
 
    <div class="progressbar" data-progress-value="90"></div> 
 
    <span style="text-align: center">90% complete</span> 
 
</body>

jQueryのドキュメントが.ATTRとすべて同様の機能がセットのみの最初の属性を取得すると言うので、私は、このコードはいえ動作しません知っています。

jQueryでこれが可能ですか？

それともこれが不可能な場合は、ここで示すXYの問題のために、は、どのように私は動的、静的なプログレスバーを設定することができますか？

ありがとうございます。

出典

2017-07-30 OldBunny2800

each()では、単純にその要素のプラグインを初期化する前に各要素インスタンスにアクセスできます。

$(function() { 
 
    $('.progressbar').each(function() { 
 
    var $el = $(this); 
 
    $el.progressbar({ 
 
     value: $el.data("progress-value") 
 
    }); 
 
    }); 
 
})

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 

 

 
Lots of stuff here 
 
<div class="progressbar" data-progress-value="33"></div> 
 
<span style="text-align: center">33% complete</span> Lots more stuff here 
 
<div class="progressbar" data-progress-value="67"></div> 
 
<span style="text-align: center">67% complete</span> More stuff here 
 
<div class="progressbar" data-progress-value="90"></div> 
 
<span style="text-align: center">90% complete</span>

出典

2017-07-30 12:42:38 charlietfl

これは私が探していたまさにですために！ありがとうございました！ – OldBunny2800

'|| $ el $ doの前に '+'と ' – OldBunny2800

値は数値にする必要があります。 'attr（）'は文字列を返します。 '|| 0 "は属性が定義されていないか、または数字が – charlietfl

あなたは、各プログレスバーに固有の、PB1のように、PB2など追加のクラスを追加することができ

それからちょうど

$(document).ready(function() { 
    $(.pb1).progressbar({ 
    value: 75 
    }); 
$(.pb2).progressbar({ 
    value: 50 
    }); 
});

出典

2017-07-30 12:50:58 Sam

回答ありがとうございますが、値が異なる可能性のある別のHTMLファイルに対して再利用可能なものを探していました。 – OldBunny2800

ええ、このシナリオでは、@charlietflの方が良い答えが好きです。 – Sam

jQueryでプログレスバーの値を動的に設定する方法は？

答えて

関連する問題