0

ユーザーがスライダーを調整すると、変化率の計算を実行する画面があります。

最も単純な形で、ここで見ることができます: http://jsfiddle.net/4Bgx7/2608/

このコードをページに実装すると、警告ボックスを挿入した場合にのみ計算が機能します。

これは、設計に何か問題があることを示していますが、問題を特定することはできませんでした。

失敗したコードは、こちらのテキスト ファイルにあります。

「html」としてローカルに保存し、ブラウザー (IE、FF、または Chrome) で開きます。

「最大スナップショット」をクリックすると、機能しないスライダーが表示されます。

ブラウザーを閉じて、次の行のコメントを外します。

//window.alert('uncomment me and I will work');

ブラウザを開いたら、「最大スナップショット」をクリックし、再度画面を更新してからスライダーをクリックします。それが動作します。

アラート ボックスの行にコメントを付けて、ファイルを保存します。ページを更新してください。動作します。

ブラウザを閉じて、html ファイルの名前を変更して開きます: 動作しません。

上記のリンクが機能しない場合の html は次のとおりです。

<html>
    <head>
        <title>Welcome</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <style media="screen" type="text/css">
            .number-block
            {
                text-align: right;
                padding-right: 2px;
            }

            .mobile-grid-header
            {
                background-color: darkgray;
                color: black;
                text-shadow:    none;
                font-weight: bold;
            }

            .original-value
            {
                /*visibility: hidden;
                position: absolute;*/
                color:red;
                background-color: yellow;
            }
    </style>
        <script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js"></script>
        <script>
            $(document).ready(function()
                  {
                      welcome_doc_ready();           
                  });

function welcome_doc_ready()
{
    //window.alert('uncomment me and I will work');
    $('#_singleRepMaxSlider').change(function() {
        var percentageValue    =    $('#_singleRepMaxSlider').val() / 100;
        $('.original-value').each(function () {
            var newValue = Math.floor(percentageValue * $(this).html());
            var checkDigit = newValue % 10;
            var newFactor = 0;
            //TODO:  Probably a bit overkill to round to nearest 5, but works
            switch(checkDigit)
            {
                case 0:
                case 1:
                case 2:
                case 3:
                    newFactor = 0;
                    break;
                case 4:
                case 5:
                case 6:
                    newFactor = 5;
                    break;
                case 7:
                case 8:
                case 9:
                    newFactor = 10;
                    break;
            }
            newValue    =    (Math.floor(newValue/10) * 10) + newFactor;
            $(this).next().html(newValue);
      });
    }
    );
}
        </script>
    </head>
    <body>
        <!-- Start Main -->
        <div data-role="page" id="Main">
            <div data-role="header">
    </div>
            <!-- /header -->
            <div data-role="content">
                <p>
                    <a href="#MaxSnapshot" data-role="button">Max Snapshot</a>
                </p>
            </div>
            <!-- /content Main -->
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
            <!-- /footer Main -->
        </div>
        <!-- /page Main-->
        <!-- MaxSnapshot -->
        <div data-role="page" id="MaxSnapshot">
            <div data-role="header">
                <h1>Max Snapshot</h1>
                <a href="#Main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
            </div>
            <!-- /header -->
            <div data-role="fieldcontain">
                <label for="_singleRepMaxSlider">Change Single-Rep Max Percentage:</label>
                <input type="range" id="_singleRepMaxSlider" value="100" min="0" max="100" step="5"/>
            </div>
            <div data-role="fieldcontain">
                <p>
                    <h3>Single Rep Max</h3>
                    <div class="ui-grid-b" data-theme="e">
                        <div class="ui-block-a mobile-grid-header">
                            <b>Exercise</b>
                        </div>
                        <div class="ui-block-b mobile-grid-header">
                            <b>Lift Date</b>
                        </div>
                        <div class="ui-block-c  mobile-grid-header number-block">
                            <b>Weight(#)</b>
                        </div>
                        <div class="ui-block-a ">Back Squat</div>
                        <div class="ui-block-b ">9/19/2012</div>
                        <div class="ui-block-c   number-block">
                            <div class="original-value">185</div>
                            <div class="calculated-value">185</div>
                        </div>
                        <div class="ui-block-a alternate-row">Deadlift</div>
                        <div class="ui-block-b alternate-row">9/19/2012</div>
                        <div class="ui-block-c  alternate-row number-block">
                            <div class="original-value">205</div>
                            <div class="calculated-value">205</div>
                        </div>
                        <div class="ui-block-a ">Jerk Clean</div>
                        <div class="ui-block-b ">9/21/2012</div>
                        <div class="ui-block-c   number-block">
                            <div class="original-value">135</div>
                            <div class="calculated-value">135</div>
                        </div>
                        <div class="ui-block-a alternate-row">Shoulder Press</div>
                        <div class="ui-block-b alternate-row">9/19/2012</div>
                        <div class="ui-block-c  alternate-row number-block">
                            <div class="original-value">115</div>
                            <div class="calculated-value">115</div>
                        </div>
                    </div>
                </p>
            </div>
            <a href="#Main" data-direction="reverse" data-role="button" data-inline="true">Return</a>
        </div>
        <!-- /page, MaxSnapshot -->
    </body>
</html>

アップデート

この問題を再現するためのより良い例を作成しました。この問題に対する答えは、次のドキュメントにあります

jQuery で最初に学ぶことは、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

ソリューションをコメントアウトした、より単純化された例を次に示します。

<html>
    <head>
        <title>Welcome</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>

                //Bad Implementation:  This is what I originally had:
                $(document).ready(function()
                  {
                       //window.alert('uncomment me and I will work');
                        $('#_mainpageSlider').change(function() {
                            $('#_mainpageOutput').val($('#_mainpageSlider').val());
                        }
                        );
                        $('#_testpageSlider').change(function() {
                            $('#_testpageOutput').val($('#_testpageSlider').val());
                        }
                        );
                  });

                //Correct Implementation:  Comment or remove the above and uncomment the html below
                  /*($( '#TestPage' ).live( 'pageinit',function(event)
                  {
                        $('#_testpageSlider').change(function() {
                            $('#_testpageOutput').val($('#_testpageSlider').val());
                        }
                        );
                  });*/
        </script>
    </head>
    <body>
        <!-- Start Main -->
        <div data-role="page" id="Main">
            <div data-role="header">
    </div>
            <!-- /header -->
            <div data-role="content">
                <p>
                    <a href="#TestPage" data-role="button">Test Page</a>
                </p>
                <div data-role="fieldcontain">
                    <label for="_mainpageSlider">Change Slider:</label>
                    <input type="range" id="_mainpageSlider" value="100" min="0" max="100" step="5"/>
                </div>
                <p>
                <div data-role="fieldcontain">
                    <label for="_mainpageSlider">Populate when Slider changes:</label>
                    <input id="_mainpageOutput" value=""/>
                </div>
                </p>
            </div>
            <!-- /content Main -->
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
            <!-- /footer Main -->
        </div>
        <!-- /page Main-->
        <!-- TestPage -->
        <div data-role="page" id="TestPage">
            <div data-role="header">
                <h1>Test Page</h1>
                <a href="#Main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
            </div>
            <!-- /header -->
            <div data-role="fieldcontain">
                <label for="_testpageSlider">Change Slider:</label>
                <input type="range" id="_testpageSlider" value="100" min="0" max="100" step="5"/>
            </div>
            <div data-role="fieldcontain">
                <label for="_testpageOutput">Populate when Slider changes:</label>
                <input id="_testpageOutput" value=""/>
            </div>

            <a href="#Main" data-direction="reverse" data-role="button" data-inline="true">Return</a>
        </div>
        <!-- /page, TestPage -->
    </body>
</html>
4

1 に答える 1

1

了解しました。わかったと思います。.ready()関数は、あなたを困惑させているものです。すべてのスクリプトをドキュメントの先頭ではなく末尾に移動してから、次を使用してwelcome_doc_ready()を呼び出す必要があります。

$('#MaxSnapshot').live('pageinit',function(event){
    welcome_doc_ready();
});

それ以外の

$(document).ready(function() {
    welcome_doc_ready();           
});

ここでは、welcome_doc_ready()を実行する前に、基本的にMaxsnapshotdivが適切であることを確認しています。お役に立てれば。

于 2012-10-02T20:17:18.183 に答える