Question

当滑块上下移动时，我想更改Message div的内容（或切换div）。我的滑块只有5个位置，因此我需要5个不同的消息来显示每个位置。有谁知道怎么做？

这是滑块代码：

$(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。

绑定jquery滑块来改变div的内容？

1 个答案: