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
            }
        });

ただし、ユーザーが別の画像を読み込むときは、プログラムでスライダーを新しい画像の値に設定したいと思います (別のガンマ設定で複数のページ間で前後にフリップできるようにすることもできます)。明確にするために、新しく読み込まれた画像のガンマは、最後に設定された値にすでになっています。新しい画像の値に合わせて UI を調整したいだけです。たとえば、ページ 2 のガンマを増やしてからページ 1 にフリップする場合、スライダーを増加した位置からデフォルトに戻す必要があり、ガンマを減らそうとしているとコードが考えずにそれを行う必要があります。

以下を使用してこれを行うと、問題が発生します。

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

問題は、これにより、上記の元の宣言でスライダーに設定したslideand呼び出しがトリガーされ、新しいガンマ値で画像を重複して再読み込みしようとすることです。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

新しい構成を渡すスライダー メソッドを呼び出すことができるかもしれません。これはおそらく、パラメーターとして渡すオブジェクトとまったく同じですが、「値」フィールドが変更されています。

古いプロジェクトの 1 つでテストを行ったところ、うまくいきました。

于 2013-06-14T15:42:21.707 に答える