Jquery UI 滑块附加标签答案

【问题标题】：Jquery UI slider attach labelJquery UI 滑块附加标签
【发布时间】：2014-03-20 12:48:00
【问题描述】：

我有一个模态，它会在某些时候出现，我有两个滑块，应该显示一些值。代码如下：

div#averageAnswerModal.modal.fade.custom-modal(tabindex="-1", role="dialog", aria-labelledby="myModalLabel" aria-hidden="true")
div.modal-content
    div.modal-body(style='text-align: center;')
        h2 Your neighbor's answers average was:
        div
            div#noAvg Your neighbors didn't give any anwer
            div#avgSlider
            span#avgLabel
        h2 Your answer was:
        div
            dvi#notAnswered You didn't give anwer
            div#yourSlider
            span#yourLabel

我有这个代码来设置 sldiers

initializeModal = function() {
        var positionLabel = function(label, slider, val) {
            $(label).html(val).position({
                my: 'center top',
                at: 'center bottom',
                of: $(slider + ' > .ui-slider-handle')
            })
        }

        myModal = $('#averageAnswerModal').modal({
            show: false,
            keybord: false
        })

        $("#avgSlider").slider({
            max: 100,
            disabled: true,
            change: function(event, ui) {
                positionLabel('#avgLabel', "#avgSlider", ui.value)
            }
        })

        $("#yourSlider").slider({
            max: 100,
            disabled: true,
            change: function(event, ui) {
                positionLabel('#yourLabel', "#yourSlider", ui.value)
            }
        })
    }

这段代码让他们兴奋起来：

createSplashSliders = function(avg, your) {
    myModal.modal('show')
    if (avg === -1) {
        $("#noAvg").show()
        $("#avgSlider").hide()
        $('#avgLabel').hide()
    } else {
        $("#noAvg").hide()
        $("#avgSlider").show()
        $('#avgLabel').show()
        $("#avgSlider").slider('value', avg)
    }

    if (your === -1) {
        $("#notAnswered").show()
        $("#yourSlider").hide()
        $('#yourLabel').hide()
    } else {
        $("#notAnswered").hide()
        $("#yourSlider").show()
        $('#yourLabel').show()
        $("#yourSlider").slider('value', your)
    }
}

滑块正确显示，我想将所选值附加到句柄下方。它附加了下面两行之类的值，如果我重复使用该页面，则每次显示模式时，跨度都会向下移动一行。当我在positionLabel 中使用调试器停止代码并复制+粘贴相同的代码时，标签会附加到正确的位置。

我已经被这个问题困扰了半天，但我仍然无法弄清楚出了什么问题。

更新

Fiddle。如果您在positionLabel 中放置一个调试器并单步执行它将正确定位标签。所以我在某个地方遇到了时间问题，只是不知道在哪里或为什么。

【问题讨论】：

小提琴请哥们...

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

如果我向

添加超时

        var positionLabel = function(label, slider, val) {
            setTimeout(function() {
                $(label).html(val).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: $(slider + ' > .ui-slider-handle')
                })
            }, 200);
        }

这可行...但不适用于5 的超时。为什么我需要这个超时？

【讨论】：