jqueryを使用して2つの配列の比率を取得

私はユーザーが彼の得点を見ることができ、彼が勝つことができる最優秀賞に向かって進歩を見ることができるスコアバーを開発しようとしています。jqueryを使用して2つの配列の比率を取得

このバーには8つの賞があり、すべての賞にはさまざまな賞品ポイントがあります。 200ポイントしか集めることで小さな賞を獲得することも、50000ポイントを集めることで旅行に勝つこともできます。

は、今の問題は、私はバーの上のすべての8つの賞のマイルストーンを表示する必要があると絵のユーザーが7800に勝つあなたが見ることができるように各1は、すべての賞のマイルストーン

enter image description here

間で同じ差異スペースがあります彼は7500のマイルストーンを達成するポイント今私は私がしなかった正確な場所にボトルを置くためにこれらのポイントの間の比率を取得する必要があります:(私はとても難しいが、nothig happendを試してみた

あなたが見ることができますフィドル：http://jsfiddle.net/Udwq9/2/

HTML

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 

<div class="barCont"> 
     <div class="innerLight"></div> 
     <div class="innerDark"> </div> 
     <div class="seek"> 
     <div class="youRhere"> 
      <p>You are here:<br /> 
      <span id="Points">7800 Points</span></p> 
      <br /> 
     </div> 
     <img src="data:image/jpeg;base64,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" width="17" height="74" alt=" " /> </div> 
     <div class="mileStone" style="">200 

     </div> 
     <div class="mileStone" style="">300 

     </div> 
     <div class="mileStone" style="">450 

     </div><div class="mileStone" style="">750 

     </div> 
     <div class="mileStone" style="">7500 

     </div> 
     <div class="mileStone" style="">15000 

     </div> 
     <div class="mileStone" style="">20000 

     </div><div class="mileStone" style="">50000 

     </div> 
    </div>

SCRIPT

var TopScore = 50000; 
    var MileStone = new Array("200", "300", "450", "750", "7500", "15000", "20000", "50000"); 
    var barWidth = $('.innerLight').width(); 
    var ArrayLength = MileStone.length; 
    var milestonepos = barWidth/ArrayLength; 
    var milestoneposMain = milestonepos/ArrayLength; 
    var Points = $('#Points').text(); 
    var yourPoints = parseInt(Points); 
    var pos = 0; 
    var bottlePos = 0; 
    var posTwo = 0; 
    var posTwoMain = 0; 

    for(var i=0; i <= ArrayLength; i++){  
     var pos = pos + milestonepos; 
     $('.mileStone').eq(i).animate({ left: '' + pos + 'px' }); 
     //alert(pos)   
     } 
    var pos = 0; 
    for(var j=0; j<= ArrayLength; j++){ 
     if(yourPoints >= MileStone[j]) 
     { 

     var pos = pos + milestonepos; 

      /*var step1 = yourPoints - MileStone[j]; 
      var step2 = MileStone[j+1] - yourPoints; 
      var step3 = step2/step1; 
      var step4 = step3*100;*/ 
      // var pointsRatio = yourPoints - posRatio; 
      //var posTwoMain = parseFloat(posTwo.style.width) 
      //alert(parseInt(posRatio)); 
      //alert(parseInt(pointsRatio)); 
      // var pos = pos + pointsRatio; 
      } 

     } 
     $('.seek').animate({ left: '' + parseInt(pos) + 'px' }, 1000);

出典

2014-01-17 Kamal

ですplzは申し訳ありませんが非でだから、再びスケールを – Kamal

をチェックあなたは任意の2つのスコア値の間の直線的な位置の後にいますか？あれは正しいですか？ –

はい正しいです – Kamal

が、7800 7500から15000のスケールで7500から何もないので、テストする価値がありません。（JSfiddleでは12700に変更しました）

http://jsfiddle.net/Udwq9/9/

私はマイルストーンは、ユーザーのスコアより大きくなっている時点で2次forループ分割するように変更。

for(var j=0; j < ArrayLength; j++) 
{ 
    if(yourPoints >= MileStone[j]) 
    { 
     pos = pos + milestonepos; 
    } 
    else 
    { 
     prevMilestone = j ? MileStone[j-1] : 0; 
     pos += parseInt((yourPoints-prevMilestone)/(MileStone[j]-prevMilestone) * milestonepos); 
     break; 
    } 
}

出典

2014-01-17 16:16:28 towr

ユーザーが50000ポイントを持っている場合にボトルが動かない – n1k1ch

@ n1k1chこれをキャッチすることに感謝します。私はforループで '<='ではなく '<'を使用していたはずです。 – towr

だけ.barContためmargin-left: 8px;にmargin-left: -8px;を変更するには、それはここでを.seek：http://jsfiddle.net/Udwq9/3/

それはあまりにも難しいようではありません

出典

2014-01-17 15:56:50 Andrew

あなたの助けに感謝しますが、これは私の質問をもう一度読んでください.. – Kamal

使用相殺に必要なカウントするために、次のループ（配列の終わりからループ）：ここで

var pos2 = 0; 

for(var j=ArrayLength-1; j >= 0; j--){ 
    var currentMilestone = parseInt(MileStone[j]); 

    //reaching "full" milestone 
    if(yourPoints >= currentMilestone) 
    { 
     pos2 = milestonepos * (j+1); 

     var diff = yourPoints - currentMilestone; 
     console.log("diff: " + diff); 

     //counting offset to move forward from "full" milestone 
     if(j < ArrayLength - 1) { 
      var nextMilestone = MileStone[j+1]; 
      var diffInPoints = nextMilestone - currentMilestone; 
      var subDiff = (milestonepos * diff)/diffInPoints; 
      pos2 += subDiff; 
     } 
     break; 
    } 
} 

console.log("pos2: " + pos2); 
$('.seek').animate({ left: '' + parseInt(pos2) + 'px' }, 1000);

がDemo

出典

2014-01-17 16:32:01 n1k1ch

jqueryを使用して2つの配列の比率を取得

答えて

関連する問題