0

次のようなスライドがあります。

$(function () {

    /*--------------------------------------------------
    Plugin: Slider
    --------------------------------------------------*/

    /* Increment Slider */
    $( "#incrementSlider" ).slider({
        range: "min",
        value:1993,
        min: 1914,
        max: 2013,
        step: 1,
        slide: function( event, ui ) {
            $( "#incrementAmount" ).text ("Birthday: " +  ui.value);

        }
    });

    $( "#incrementAmount" ).text ( "Birthday: " + $( "#incrementSlider" ).slider( "value" ));


});

ユーザーがスライダーで誕生日を選択した場合、いくつかの情報を表示したいと思います。

たとえば、ユーザーは 1980 を取得します。

Infotext 1 belong to 1980,
Infotext 2 belong to 1980,
Birthday   belong to 1980,
Infotext 3 belong to 1980,
Infotext 4 belong to 1980

テキストで自由に使用できるようにする必要がありますが、ユーザーがスライダーで誕生日を変更すると、もちろん自動的に変更する必要があります。

そうである必要はありません。他の方法がある場合、mysql を使用したソリューションは好みません。

4

1 に答える 1

0

わかりましたので、MySQL を使用しないソリューションです。仮定する

  • (長い段落のテキストではなく) hot や cold などの限られた値のセットについて話している
  • データは静的であり、変更されることはありません

画面の読み込み時にすべてのデータを含める

javascript ファイルにデータを含めるだけで済みます。たとえば、sliderdata.jsというファイルを作成してリンクします。ファイル内にデータのハッシュ テーブルを作成します (別名、JavaScript 連想配列)。

var dataForInfoText = {
    "1980": "cold",
    "1985": "hot",
    "1990": "cold",
};

次に、スライドイベントハンドラー内に次のjsを追加します

infoText1.text(dataForInfoText[ui.value]);

注: 連想配列を使用すると、次の 2 つの方法で値にアクセスできますdataForInfoText.propertyName1。dataForInfoText['propertyName1']

そして、これが機能していることを示すためのフィドルhttp://jsfiddle.net/sDBTy/の例では、データを例に直接含めました（別のファイルではなく、別のファイルにすることもできます）...

変動 - 必要に応じてその年のデータをロード

まず、必要に応じてスクリプト ファイルを動的にロードできるようにするヘルパー メソッドが必要です。

function loadModule(name, callback) {
    $.ajax({type: "POST"
        , url: name
        , dataType: "script"
        , success: callback
    });     
}

必要なすべての情報テキストを含むスクリプト ファイルを年ごとに作成します。1980.js の内容は次のようになります。

var infotextdata = {
    "text1" : "cold",
    "text2" : "its 1980"
};

および1981.js

var infotextdata = {
    "text1" : "hot",
    "text2" : "this one was born 1981"
};

注: 今回は、オブジェクト text1 と text2 ごとに 2 つのプロパティを含めましたが、これは、表示する必要がある情報テキストに応じて任意の数になる可能性があります

最後に、スライド イベント ハンドラを次のように修正します。

// declare sliderTimeout outside of the handler
clearTimeout(sliderTimeout);

sliderTimeout = setTimeout(function () {
    loadModule(selectedValue + ".js", function () {
        infoText1.text(infotextdata.text1);
        infoText2.text(infotextdata.text2);
    }), 2000);

1980.jsなどselectedValue + ".js"の URL になる場所。したがって、基本的には毎年の.jsがあり、最初にその年の js ファイルをロードし、必要に応じて最初に 1 と 2 のテキストを設定することで情報テキストを設定します。

clearTimeoutと、setTimeout遅延を追加して、ユーザーが年に 2 秒間一時停止したときにのみデータ ファイルが読み込まれるようにします。明らかに、必要に応じて遅延を変更したり、完全に削除したりできます...

個人的には、この 2 番目の方法が、データベースなしで ajax に最も近い方法だと思います (データが静的であると仮定します)。あなたはphpをバイパスしているので、より効率的です。ウェブサーバーにデータを直接要求し、不必要にすべての年のデータを取得しないという柔軟性を提供します...

于 2013-05-06T06:57:29.277 に答える