javascript - 绑定(bind)jquery slider 来改变div的内容？

Question

我想在 slider 上下移动时更改消息 div 的内容(或切换出 div)。我的 slider 只有 5 个位置，因此当选择每个位置时我需要显示 5 条不同的消息。有人知道该怎么做吗？

这是 slider 代码:

$(function () {
    var donation = ['Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond'];
    jQuery('#slider').slider({
        min: 0,
        max: 4,
        orientation: 'horizontal',
        step: 1,
        create: function (event, ui) {
            jQuery('#amount').text(donation[0]);
        },
      slide: function( event, ui ) {
        jQuery('#amount').text(donation[ui.value]);
      }
    });
});

Answer 1

您实际上已经非常接近做到这一点了。如果您想要显示一条始终与捐赠级别一致的消息，您可以将字符串数组扩展为 JSON 对象数组:

var donation = [
    {'level':'Bronze', 'message':'Woo Bronze tier!'},
    {'level':'Silver', 'message':'Woo Silver tier!'},
    {'level':'Gold', 'message':'Woo Gold tier!'},
    {'level':'Platinum', 'message':'Woo Platinum tier!'},
    {'level':'Diamond', 'message':'Woo Diamond tier!'}];

然后您可以在代码中调用对象的级别和消息部分:

$(function () { 
    $('#slider').slider({
        value:100,
        min: 0,
        max: 4,
        step: 1,
        create: function (event, ui) {
            $('#amount').text(donation[0].level);
            $('#message').text(donation[0].message);
        },
      slide: function ( event, ui ) {
        $('#amount').text(donation[ui.value].level);
        $('#message').text(donation[ui.value].message);
      }
    });
});

您可以查看工作演示 here .