Question

需要帮助，我正在使用jquery-ui滑块。我现在有：

而且，必须是：谢谢你的帮助。

为我的滑块插件更新处理程序标签的方法：

updateLabelsOfHandlers: function() {

            var scope = this.data('scope');
            this.find('#min').text(scope.params.minLoanAmount);
            this.find('#max').text(scope.params.maxLoanAmount);    
            this.find('div.sliderLabel-value').remove();

            if (scope.sliderValue.length === 0) {
                this.find('#slider a:eq(0)').hide();
            }

            for (i = 0; i < scope.sliderValue.length; i++) {
                var chield = this.find('#slider a:eq(' + i + ')');
                chield.html('<div class="sliderLabel-value">' + scope.sliderValue[i] + '</div>');
            }
            },

滑块结构：

$(this).append(
                        '<div class="sliderContainer">'+
                            '<div id="sliderInfo">'+
                            '</div>'+
                            '<div class="sliderColumn-center">'+
                                '<div id="slider"></div>'+
                            '</div>'+
                            '<div id="leftDiv" class="sliderColumn-left">'+
                                '<div id="min"></div>'+
                            '</div>'+
                            '<div class="sliderColumn-right">'+
                                '<div id="max"></div>'+
                            '</div>'+
                        '</div>')

我还为我的问题添加了实现（就是我的预期）

updateLabelsOfHandlers : function() {

                var scope = this.data('scope');
                this.find('#min').text(scope.params.minLoanAmount);
                this.find('#max').text(scope.params.maxLoanAmount);    
                this.find('div.sliderLabel-value').remove();
                var labelsPositions = [];

                if (scope.sliderValues.length === 0) {
                    this.find('#slider a:eq(0)').hide();
                }

                for (i = 0; i < scope.sliderValues.length; i++) {
                    var chield = this.find('#slider a:eq(' + i + ')');
                    chield.html('<span class="sliderLabel-value">' + scope.sliderValues[i] + '</span>');
                    var sliderLabel = chield.find('.sliderLabel-value');
                    labelsPositions.push({sliderLabel:sliderLabel,width:sliderLabel.width(), left:chield.position().left, height:sliderLabel.height()});
                }

                var bottomShift = labelsPositions.length > 0 ? parseInt(labelsPositions[0].sliderLabel.css('bottom')) : 0;

                for (i = 1; i < labelsPositions.length; i++) {
                    for (j = 0; j < i; j++) {

                        var leftLabelBottom = parseInt(labelsPositions[j].sliderLabel.css('bottom'));
                        var rightLabelBottom = parseInt(labelsPositions[i].sliderLabel.css('bottom'));
                        var leftLabelSize = labelsPositions[j].left + labelsPositions[j].width;  
                        var rightLabelSize = labelsPositions[i].left;


                        if (leftLabelSize > rightLabelSize && leftLabelBottom === rightLabelBottom) {
                            bottomShift += labelsPositions[j].height;
                            labelsPositions[i].sliderLabel.css("bottom", bottomShift + 'px');
                        }
                    }
                }
            },

Answer 1

将所有标签放入数组
存储标签的每个“宽度”
按时间排序数据并从视频/播放器开始检查
如果您的标签'B'在标签'A'的范围内，则向上抬起标签'B'
如果您的标签“C”在标签“A”和标签“B”的范围内，则将标签抬高*（范围内的数字）

如果是CSS，你需要创建具有不同y位置的Shift1，Shift2，Shift3 ......类（我认为你最多可能需要6个，否则没有人能看到滑块上的东西）

如何防止滑块标签重叠？

1 个答案: