jquery - jquery获取触发功能以在jquery ui滑块上使用某些鼠标坐标触发

Question

我不会打扰项目的背景，但我在获取 jquery ui 滑块以使用触发器功能注册点击时遇到问题。

基本上设计规定标签（或任何 dom 元素）位于滑块的顶部。这必须通过调整css中的元素z-index来完成。但是，您随后显然无法单击滑块，因为该元素位于顶部，因此挡住了路，没有任何记录。

我在这里设置了一个小提琴，有助于详细说明问题。基本上我不会让两个滑块在功能上相同（有或没有标签）。

http://jsfiddle.net/adrianjacob/5StND/

js 参考：

$("ul > li").each(function () {

    $(this).children('span').slider({
        value: 100,
        min: 0,
        max: 500,
        step: 25
    });

    $(this).on('click', 'label', function (e) {
        var evt = {
            'type': 'click',
            'pageX': e.pageX,
            'pageY': e.pageY
        };
        $(this).siblings('span.ui-slider').trigger(evt);
    });

});

干杯，阿迪。

Answer 1

这是一个将 span 元素插入到句柄中的解决方案，因此它保持“连接”到句柄。

$(this).children('span')
    .slider({
        value: 100,
        min: 0,
        max: 500,
        step: 25
    })
    .siblings("label")
        .appendTo($(this).find(".ui-slider-handle"))
;

这是jsfiddle 的链接