0

今日作成したこのフィドルがあります。星評価用の jquery プラグインです。

必要なものはすべて div タグ内にレンダリングし、設定を使用してカスタマイズします。

$('#myNewRatingControl').makeStar({ 
    sourceImage: urlOfImage 
}).starRating({
    sourceImage: urlOfImage,
    hoverImage: urlOfImage,
    initialRating: 3
});

これはごちそうです、そして私はそれに本当に感銘を受けました. ただし、それを最適化するためにやりたいことがいくつかあります。これらの最適化を実装しようとしましたが、うまくいきませんでした。

それらは次のとおりです。

  1. それらを 1 つの関数に凝縮します。画像にクリック イベント ハンドラが関連付けられているため、これを行うことができませんでした。それらはDOMが更新されたときにのみ適用され、jquery関数が出力を返すまで適用されません。少なくともそれは私が理解していることであり、私のJQueryを使用して別の方法を教えてください! -解決済み トップのフィドルを参照してください。
  2. 画像のプリロード。いくつかの画像プリローダーに遭遇しましたが、このコンテキストでそれらを使用する方法がわかりません。それらをどこに置くか、プリロードされた後にそれらを呼び出す方法。
  3. 最初の関数が解決されたので、2 番目の関数をプラグイン (スコープ) 内で非公開にする方法を考えていました。

私のフィドルを使用して、これらの最適化を実現する方法を教えてください。

ありがとう、

4

1 に答える 1

0

だから、私は次のことを行ったこの新しいフィドルを持っています:

  1. コードを短くした
  2. コードをリファクタリングしました
  3. Tri State Stars を有効化 (ホバー、選択、選択解除)
  4. selectedImage に別の設定を導入

今残っている唯一のものは次のとおりです。

  1. 関数のスコープをプライベート化する
  2. 画像のプリロードを行う

両方のコードを見て、行われたさまざまな最適化を理解してください。

三州コード:

    function setImageSrcProper()
    {
        for (var i = 1; i < settings.numberOfStars; i++)
        {
            var id = '#star' + i;
            var selected = $(id).attr('data-selected');
            var hover = $(id).attr('data-hover');
            if (selected == 'true')
            {
                $(id).attr('src', settings.selectedImage);   
            }
            else
            {
                $(id).attr('src', settings.sourceImage);   
            }

            if (hover=='true')
            {
                $(id).attr('src', settings.hoverImage);   
            }
        }
    }

私はトライステートにdata-selectedandを使用しますdata-hover。基本的な考え方は、常に星が選択されているか選択されていないかのいずれかです。次に、マウスが導入されると、ホバーはこれらの状態のいずれかをオーバーライドします。マウスを離すと、状態は元の状態に戻り、すべてdata-hoverが改ざんされます。

于 2013-06-18T14:50:41.597 に答える