5

我有一个滑块。当用户滑动它时，它会调整图像的伽玛。这是代码，非常简单，可以完美运行。

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

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

当我使用以下方法执行此操作时，会出现问题：

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

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

4

2 回答 2

6

您可以使用这样一个事实，即您可以通过event.originalEvent. 例如，您可以拥有在用户进行更改时执行的代码，以及在您进行编程更改（例如更改值）时执行的不同代码。由于更改值将触发滑块的更改事件，因此您可以将伽玛更改代码放在仅在用户更改时触发的块中，而不是编程更改：

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

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

于 2013-06-14T15:42:28.743 回答
0

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

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

于 2013-06-14T15:42:21.707 回答