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 的解决方案；假设

  • 我们谈论的是一组有限的值，比如热和冷（而不是长段文本）
  • 数据是静态的，永远不会改变

包括屏幕加载时的所有数据

您可以只将数据包含在 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"会产生一个 url，例如1980.js；所以基本上我们每年都有一个.js ，我们通过首先加载该年的js文件并根据需要将文本设置为1和2来设置信息文本。

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

就我个人而言，我认为第二种方法是最接近没有数据库的 ajax（假设数据是静态的）。您正在绕过 php，因此效率更高；直接向您的网络服务器询问数据，并提供了无需多年不必要地获取数据的灵活性......

于 2013-05-06T06:57:29.277 回答