3

だから私は、nob.js を使用して 2 つのダイヤルを作成しています。外側のダイアルは、書籍の累積評価、つまりすべての評価の平均を表します。この外側のダイヤルにはdata-readOnly="true"値があり、これらのダイヤルの共通の中心に値が表示されます。内側のダイヤルは、私 (ユーザー) がその本の評価を送信するためのものです。このように、内側のダイヤル値は、私 (ユーザー) によって変更できます。

<div class="demo_sub_outer">
    <input class="knob" data-thickness=".1" data-width="150" data-height="150" data-angleOffset=0 data-displayInput="true" data-angleArc=360 data-fgColor="#209652" data-bgColor="#eee" data-inputColor="" data-readOnly="true" value="{{ u_list.cum_attr_ratings.sexy }}">
</div>

<div class="demo_sub" id="demo_sub_1">
    <input class="knob" id="sexy" data-thickness="0.5" data-width="130" data-height="130" data-angleOffset=0 data-displayInput="false" data-angleArc=360 data-fgColor="#b8dcc7" data-bgColor="#e5e5e5" value="{{  u_list.attr_ratings.sexy }}" Title="Cumulative wealthiness" >
</div>

私がそれを機能させたい方法は、内側のダイヤル値を変更したとき (つまり、本を評価するとき、または本の評価を変更したとき)、それに応じて外側のダイヤル値 (累積評価) を更新することです。

これが私がこれをやろうとした方法です... jsFiddle

ダイヤルのどこかをクリックして内側のダイヤル値を変更すると、これは正常に機能しますが、マウスをドラッグしてこの値を変更すると...予期しない結果になります。この奇妙な動作の理由は何でしょうか。

編集: jsFiddleのデモでは、他の 3 人のユーザーがこの本を 80/100 と評価していると想定しています ...

4

1 に答える 1

2

私が理解していることから、あなたの問題は、両方のノブに同じ変更コールバックを使用しているという事実に関連しています。

$(function($) {
    var prev_ratings = [80, 80, 80]

    $('.outer-knob').knob();
    $(".inner-knob").knob({
            var new_ratings = prev_ratings;
            new_ratings.push(+$('.inner-knob').val());

            var sum = new_ratings.reduce(function(acc, v) { return acc + v }, 0)
            $('.outer-knob').val(sum / new_ratings.length);

           // code with some output is available on jsfiddle below
        },
    });
});

次の点であなたのフィドルを更新しました：

  • ノブの異なる初期化
  • 以前の評価は、テストを容易にするための配列になりました
  • 新しい評価の計算を単純化する

http://jsfiddle.net/uHkN5/16/

配列のメソッドを使用reduceして実際の評価計算を行いました。慣れていない場合は、mdn でいくつかのドキュメントを見つけることができます: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/Reduce

ただし、新しい評価をバックエンドに送信する方法を理解する必要があります。

于 2014-08-13T05:27:26.867 に答える