0

次の html を使用した 5 つ星評価システムがあります。

<div class="rate-small rate0"></div>

5 つすべての星が強調表示されていることを示す場合はrate-small rate50、同様rate-small rate25に 2.5 つ星を示します。

私ができるようにしたいのは、ユーザーが星の上にマウスを置くと、ユーザーが星に沿ってマウスを動かすと、適切な量の星が強調表示されることです。したがって、それらが 2 番目の星の上にある場合、星 1 と 2 が強調表示されます。それらが 5 番目の星にある場合、すべての星が強調表示されます。クリックすると評価が記録されます。

私のJqueryは問題なく動作しているように見えましたが、参考のためにconsole.logを実行すると、座標が完全にずれているように見えます。最終的に、マウスムーブでクラスを変更するタイミングをjqueryに伝える方法を理解するのに苦労しています。座標は、ある時は正しく、次はそうではないようです。最終的に私はそれを設定した方法が好きではありません.アプローチするための最良の方法をかなり見つけてください：

var rate={
    start: function(){

       $('body').on('mousemove','div.rate-small',function(e){
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       //console.log(y);
        if(x>'534' && x<'662'){
            rate.makeBold();
            if(x>'540' && x<'550'){
             $(this).attr('class','rate-small rate5')   
            }
            else if(x>'550' && x<'560'){
             $(this).attr('class','rate-small rate10')  
            }
            else if(x>'560' && x<'570'){
             $(this).attr('class','rate-small rate15')  
            }
            else if(x>'570' && x<'580'){
             $(this).attr('class','rate-small rate20')  
            }
            else if(x>'580' && x<'590'){
             $(this).attr('class','rate-small rate25')  
            }
            else if(x>'590' && x<'600'){
             $(this).attr('class','rate-small rate30')  
            }
            else if(x>'600' && x<'610'){
             $(this).attr('class','rate-small rate35')  
            }
            else if(x>'610' && x<'620'){
             $(this).attr('class','rate-small rate40')  
            }
            else if(x>'620' && x<'630'){
             $(this).attr('class','rate-small rate45')  
            }
            else if(x>'630' && x<'660'){
             $(this).attr('class','rate-small rate50')  
            }
          }
       }).on('mouseleave','div.rate-small', function(){
             $(this).attr('class','rate-small rate0');
             rate.removeBold(); 

       }).on('click','div.rate-small', function(){
           var rateId = ($(this).attr('id'));
           var rateClass = ($(this).attr('class'));
           var rateNum = rateClass.replace(/[^0-9]/g, '')
           rate.sendrate(rateId,rateNum)
       })

  },
}

注: このコードは問題なく動作していましたが、y 座標を console.log に記録すると、Chrome、FF、および IE で約 200 ～ 300 ずれています。繰り返しますが、私は座標を正しく取得していない人です。または、div 全体でそのような厳密な数値を指定せずにこれを行うためのより良い方法があります。

4

2 に答える 2

0

星半分の画像を 10 枚使用することをお勧めします。そうすれば、4行のCSSですべてが達成可能になります

HTML:

<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate( 5);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(10);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(15);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(20);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(25);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(30);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(35);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(40);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(45);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(50);"></div>

CSS:

.left_half {
 background:url('left_half_empty.png');
}

.left_half:hover {
 background:url('left_half_full.png');
}

.right_half {
 background:url('right_half_empty.png');
}

.right_half:hover {
 background:url('right_half_full.png');
}
于 2013-06-03T20:25:11.493 に答える