javascript - 带有 Bootstrap 弹出框的 jQuery UI slider 在幻灯片事件上发生变化

Question

我在 bootstrap 和 jQueryUI 方面遇到了问题，我认为这更多是一个实现问题。

我正在尝试将 Bootstrap 弹出窗口添加到 jQueryUI slider ，然后在 slider 的侧面事件中我尝试更改弹出窗口的文本

下面是我到目前为止的代码。

<Script type="text/javascript">
    jQuery(function () {
    jQuery("#slider1").slider({
        value: 5,
        min: 0,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            switch(ui.value){
                case 0:
                    jQuery("#slider1").data('popover').options.content = 'new content 0';
                break;
                case 1:
                    jQuery("#slider1").data('popover').options.content = 'new content 1';
                break;
                case 2:
                    jQuery("#slider1").data('popover').options.content = 'new content 2';
                break;
                case 3:
                    jQuery("#slider1").data('popover').options.content = 'new content 3';
                break;
                case 4:
                    jQuery("#slider1").data('popover').options.content = 'new content 4';
                break;
                case 5:
                    jQuery("#slider1").data('popover').options.content = 'new content 5';
                break;
                case 6:
                    jQuery("#slider1").data('popover').options.content = 'new content 6';
                break;
                case 7:
                    jQuery("#slider1").data('popover').options.content = 'new content 7';
                break;
                case 8:
                    jQuery("#slider1").data('popover').options.content = 'new content 8';
                break;
                case 9:
                    jQuery("#slider1").data('popover').options.content = 'new content 9';
                break;
                case 10:
                    jQuery("#slider1").data('popover').options.content = 'new content 10';
                break;
            }
            jQuery("#slider1").find(".ui-slider-handle").text(ui.value);
            jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(ui.value);
        }
    });
    jQuery("#amount1").val("£" + jQuery("#slider1").slider("value"));
});
jQuery(document).ready(function() {
    var value = jQuery("#slider1").slider("option","value");
    jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(value);
    jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 5', content: "It's so simple to create a tooltop for my website!"});
    jQuery("#slider1").popover('show');
    jQuery("#slider1").find(".ui-slider-handle").text(value); 
});

基本上，上面的代码所做的就是设置一个从 0 到 10 的 slider ，增量为 1，然后我在 slider handle 上设置一个标签来显示当前的 ui 值，并在幻灯片事件上更改它。我遇到的问题是移动 slider 时 Bootstrap 没有改变

Bootstrap 弹出窗口正在初始化，并显示页面何时加载，具有正确的值，调试JS时，正在点击switch语句并传入值，它似乎没有改变BS 文本。

Answer 1

嗯，弹出窗口不会收到您更改选项的通知。尝试调用 setContent:

var popover = jQuery("#slider1").data('popover');
popover.options.content = 'new content 10';
popover.setContent();