1

Jqueryプログレスバーがいくつかあり、それぞれ異なる値で動的に入力する必要があります。

HTMLコードは以下に添付されています。

<div id="Wrapper">
<form method="POST" action="ClearPoll">
    <div id="mydiv" class="Gadget">
        <input class="PercentageHid" type="hidden" value="36" name="Percentage">
            <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object>

        <div class="Information">
            <input class="PollViewName" type="text" value="Potatoe Masher" placeholder="Please Enter the Gadget Name" name="Name" readonly="">
            <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">You'll Never Stop Mashing ! </textarea>
        </div>
            <div id="Potatoe Masher" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 36.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36">
            <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div>
        </div>
    </div>
</form>

<form method="POST" action="ClearPoll">
    <div id="mydiv" class="Gadget">
        <input class="PercentageHid" type="hidden" value="52" name="Percentage">
        <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object>
    <div class="Information">
        <input class="PollViewName" type="text" value="Butter Slicer" placeholder="Please Enter the Gadget Name" name="Name" readonly="">
        <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">No More Work </textarea>
    </div>
    <div id="Butter Slicer" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 52.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36">

    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div>
    </div>
    </div>

各プログレスバーは、非表示の入力フィールド「パーセンテージ」の値を取る必要があります

私の現在のJavascriptファイルは次のようになります。

$(document).ready(function () {
   var text = $(this).find('[name="Percentage"]').val();   
   $(function() {
      alert(text);
      $('.ProgressBar').progressbar({
         value: parseInt(text)
      });
   });
});

JavaScriptコードは機能しますが、パーセンテージ値をそれぞれのプログレスバーではなく、すべてのプログレスバーに設定します。

基本的に、私が必要としているのは、非表示フィールドの値を取得し、その値を同じフォームのプログレスバーに適用することです。

ありがとうございました..

4

1 に答える 1

0

通常、複数のインスタンスに対してインスタンス固有のデータを必要とするプラグインを初期化する必要がある場合は、要素のコレクション全体を一度に初期化するのではなく、要素をループして個別に初期化する必要があります。

この場合、各フォームをループできます。

$(document).ready(function () {

    $('form').each(function () {
        var text = $(this).find('[name="Percentage"]').val();
        /* iniitialize the progress bar within this form*/
        $(this).find('.ProgressBar').progressbar({
            value: parseInt(text)
        });
    });
});
于 2013-01-19T14:45:58.567 に答える