Question

我有一个滑块。当用户滑动它时，它会调整图像的灰度系数。这是代码，非常简单，完美地运作。

$('#gammaSlider').slider({
            max: 125,
            min: -125,
            value: 0,
            slide: function () {
               //stuff to adjust gamma of image
            },
            change: function () {
                //stuff to adjust gamma of image
            }
        });

但是，当用户加载不同的图像时，我想以编程方式将滑块设置为新图像应该处于的值（例如，允许在具有单独伽玛设置的多个页面之间来回翻转）。要清楚，新加载的图像的伽玛已经处于上次设置的任何值。我只是想调整UI以匹配新图像的值。例如，如果我增加第2页的伽玛值，然后翻到第1页，我需要将滑块从其增加的位置移回默认值，并且我需要这样做没有代码思考我正试图减少伽玛。

当我使用以下操作时，会出现问题：

$('#gammaSlider').slider('value', gamma);

问题是这会触发我在上面原始声明中为滑块设置的slide和change调用，导致它尝试使用新的gamma值冗余地重新加载图像。有没有办法以编程方式更改滑块而不触发这些调用？

Answer 1

您可以使用event.originalEvent来区分用户更改和程序更改的事实。例如，您可以拥有在用户进行更改时执行的代码，以及在进行编程更改（例如更改值）时执行的不同代码。自changing the value will trigger the slider's change event起，您可以将您的伽玛变更代码放在仅在用户更改时触发的块中，而不是程序化更改：

change: function (event) {
    if (event.originalEvent) {
        //stuff to adjust gamma of image ONLY WHEN USER CHANGES THE SLIDER
        console.log('user change');
    }
}

您可以在此 jsFiddle example 中看到滑块的值已更改为50，但除非用户移动滑块，否则不会生成任何日志消息。如果您注释掉if条件，您将看到日志消息不仅在用户更改滑块的值后生成，而且在您以编程方式更改值时生成。

Answer 2

也许您可以调用滑块方法传递一个新配置，这可能与您作为参数传递的对象完全相同，但更改了“value”字段。

我在我的一个旧项目中做过测试，它对我有用。

如何在不调用更改/滑动方法的情况下更改滑块的位置？

2 个答案: