1

ウェブサイト

開発中のビルドはrandomactsofviolet.comで見ることができます

含まれているライブラリ：

  • vaccordian
  • マウスホイール
  • jquerytools
  • イージング

vaccordianは、コンテンツのさまざまなページを上下にシフトするための「スクロール可能な」要素（JQueryツール）を埋め込みます

標的

JQueryの/Ajax.load（）メソッドを使用して動的コンテンツをロードし、JQueryの.data（）メソッドを使用して取得しているURLを渡そうとしています。データ属性「state」を使用してコンテンツがすでにロードされているかどうかをテストし、状態が未定義の場合にのみload（）関数を呼び出すことにも注意してください。
FirefoxとDreamweaverのプレビューウィンドウ内で完全な機能を取得できたので、構文とデータ属性の使用の両方が正しいという印象を受けましたが、私のメソッドがchromeまたはIE9で機能しないことがすぐに明らかになりました。

私の調査では、.data（）メソッドと.data（）がjquery 1.4以降に含まれているため、両方がブラウザー間でサポートされていることが示唆されています。

問題は私の構文にあるのでしょうか？別の方法がある場合は、提案をいただければ幸いです。

Steven Donsは、attr（）を使用すべきではない理由について良い議論をしています。：

特にデータを読み取るのではなく操作する場合は、可能ですが、すべきではありません。> attr（）を使用すると、データはDOMに戻ります。data（）を使用すると、個別に保持されます。> attr（）で値を変更し、次にdata（）で値を読み取ると、異なる値が得られます。また、> attr（）は文字列のみを処理し、data（）は整数などのネイティブ型に変換されます。>何をするにしても、自分が何をしているのかを本当に理解していない限り、attr（）とdata（）の使用を混在させないでください。私の経験則では、attr（）を使用して元のDOMメタデータを読み取るか、DOM>プロパティを変更し、data（）をアプリケーションの状態に使用します。–スティーブンドン3月17日10:44

現在の構文

$('.va-slice').bind("expand", function(evt) {
                // bind an 'expand' event and test for defined state of slice
                if (typeof $(evt.target).data('state') === 'undefined') {
                    //if undefined, find the content div within the target and store its url attribute
                    var url = $(evt.target).find('.va-content').data("url");
                    //then load the url into the div using ajax
                    $(evt.target).find('.va-content').load(url);
                    //Set state attribute as expanded
                    $(evt.target).data('state', 'expanded');
                } else {
                    //Just set the state to expanded & allow the accordian script to open the panel
                    $(evt.target).data('state', 'expanded');
                }
            }).bind("collapse", function(evt) {//collapse function
                $(evt.target).data('state', 'collapsed');                   
            }).toggle(function() { // toggle between functions
                $(this).trigger("expand");
            }, function() {
                $(this).trigger("collapse");
            });


//note the line $(evt.target).data('state', 'expanded'); in else definition is not present on the live site,but is in my local version and doesnt affect the issue in question.

使用中のHTML

<div class="va-slice about">
            <h3 class="va-title">About</h3>
            <div class="va-content" data-url="about.html">
            <div class="loadspace"></div>
            </div>
        </div>

私の調査

URLがdiv要素から取得されていないか、ajaxの使用に問題がありますか？Javascriptが有効になっています。私はスタックでかなりの読書をし、このトピックに関する他のいくつかの有用な問題に遭遇し、いくつかの有用な考慮事項を学びましたが、このシナリオでは問題を明確にすることができません。潜在的に、これは厄介な単純なものであり、HTMLの上部にあるブラウザに何かを有効にしたり、特定の構文
を許可したりする必要があることを決して忘れないことを願っています。 Firefoxのインスペクター内。ライブメッセージ/エラーを表示するためにそれを使用する方法、またはインスペクターを使用して問題を診断する方法を誰かが説明できますか？

4

1 に答える 1

1

コードは問題ないように見えますが、開発者ツールバー/ firebug / inspectorのネットワークタブ（すべてのブラウザーでF12）を見ると、「ポートフォリオ」セクションのリクエストのすべてのアイテムが404（ファイルが見つかりません）を返すことがわかります。FFのfirebugにもそのようなタブがありますが、divをクリックする前に、それを有効にしてFirebugを開く必要がある場合があります。おそらく-あなたのURLは正しくありません。または、サーバーにファイルがありません。ファイアバグについて-率直に言って、それについて何を言うべきかわからない。エラーが発生した場合は、ウィンドウのどこかにメッセージが表示されます。見逃せません。それをクリックするとコンソールが開きます。いくつかのメッセージをクリックすると、エラーが発生したJSコードの行が表示されます。[スクリプト]タブでは、ブレークポイントを設定したり、変数の状態を表示したりできます。基本的に、デバッガーを備えたIDEと同じです。Firebugとその機能についてグーグルで検索してください。

于 2012-09-10T21:56:47.050 に答える