Question

我有一张这样的幻灯片：

$(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的解决方案。

Answer 1

好的，没有MySQL的解决方案;假设

我们谈论的是一组有限的价值观，比如冷热（而不是长篇文章）
数据是静态的，永不改变

在加载屏幕时包含所有数据

您可以将数据包含在javascript文件中，例如创建并链接到名为 sliderdata.js 的文件。在文件内部创建数据的哈希表（也称为javascript关联数组）

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

然后在你的幻灯片事件处理程序里面添加以下js

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

注意：关联数组允许您以两种方式访问值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);

selectedValue + ".js"会产生一个网址，例如 1980.js ;所以基本上我们每年都有一个 .js ，我们通过首先加载该年份的js文件并根据需要将文本设置为第1和第2位来设置信息文本。

clearTimeout和setTimeout，添加延迟，以便仅在用户暂停一年2秒时加载数据文件，显然您可以根据需要更改延迟，或者将其删除完全...

就我个人而言，我认为第二种方法是最接近没有数据库的ajax（假设数据是静态的）。你绕过了php，所以效率更高;直接向您的Web服务器询问数据，并提供不必要地获取所有年份数据的灵活性......

Jquery UI Slider与ajax，php和mysql

1 个答案: