Question

我正在尝试创建一个jquery句柄，当你滑动它时，它会在容器内移动另一个div。以下是我的js

function handleSliderChange(e, ui)
{
    console.log('1');
    var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) },1000);
}

function handleSliderSlide(e, ui)
{
    console.log('2');
    var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 10);
}

    $("#content-slider").slider({
        animate: true,
        slide: handleSliderSlide,
        change: handleSliderChange
    });

所以当我点击栏时，会调用handleSliderChange和handleSliderSlide，但是当我拖动滑块时，它可以正常工作吗？我不介意从滑块中取消点击功能我只需要拖动

Answer 1

我找到了解决方法，诀窍是在运行方法之前检查触发了什么类型的事件。这就是我做的方式

sliderBar.slider({
                start: checkType,
                animate: options.animateSpeed,
                slide: handleSliderSlide,
                step: options.step,
                change: handleSliderChange,
                });

function checkType(e){
            _isSlide = $(e.originalEvent.target).hasClass("ui-slider-handle");
        }

改变和幻灯片一起调用jqueryui滑块

1 个答案: