なぜそれが正しい番号で強調表示されていませんか？

Question

Iveは私の商品ページに数量ボックスを持っています。あなたが数量を増減すると、どの割引が得られるかがボックスで強調されますが、何らかの理由で3パック以上が強調表示されます。量は> = 3

私のコードです：

  //QUANTITY BUTTONS 
    var upBtn = jQuery('#btn-qty-up'); 
    var downBtn = jQuery('#btn-qty-down'); 
    var currentQty = document.getElementById('qty_extention'); 

    var priceTable = jQuery('#multibuy table'); 

    var qty = currentQty.value; 

    downBtn.click(function(){ 
     var currentQty = document.getElementById('qty_extention'); 
     var qty = currentQty.value; 
     //console.log(qty); 
     //console.log('down'); 
     if(!isNaN(qty) && qty > 0){ 
      currentQty.value--; 


      //VARIBLES DECLARED 
      var newPrice = jQuery('#dynamic_pricing').find('h1'); 
      var screwinput = jQuery('select#attribute186').find(":selected").text(); 

      var calPrice; 
      var QtyPrice; 

      //IF QUANTITY IS MORE THAN X THEN PRICE IS X 
      switch(true) { 
       case (qty <= 2): 
        QtyPrice = '12.95'; 
        priceTable.find('tr:first-child').css('background', 'none'); 
        break; 
       case (qty >=3 && qty <= 4): 
        QtyPrice = '12.30'; 
        priceTable.find('tr:first-child').css('background', '#ccc'); 
        priceTable.find('tr:nth-child(2)').css('background', 'none'); 

        break; 
       case (qty >=5 && qty <= 9): 
        QtyPrice = '11.65'; 
        priceTable.find('tr:first-child').css('background', 'none'); 
        priceTable.find('tr:nth-child(2)').css('background', '#ccc'); 
        priceTable.find('tr:nth-child(3)').css('background', 'none'); 
        break; 
       case (qty >=10): 
        QtyPrice = '10.95'; 
        priceTable.find('tr:nth-child(2)').css('background', 'none'); 
        priceTable.find('tr:nth-child(3)').css('background', '#ccc'); 
        break; 
      } 

      jQuery('#qty').val(currentQty.value); 

      calPrice = (QtyPrice * currentQty.value); 
      newPrice.html('£' + calPrice.toFixed(2)); 

     }   

     return false; 
    }); 

    upBtn.click(function(){ 
     var currentQty = document.getElementById('qty_extention'); 
     var qty = currentQty.value; 
     //console.log(qty); 
     //console.log('up'); 
     if(!isNaN(qty)) { 
      currentQty.value++; 

      //VARIBLES DECLARED 
      var newPrice = jQuery('#dynamic_pricing').find('h1'); 
      var screwinput = jQuery('select#attribute186').find(":selected").text(); 

      var calPrice; 
      var QtyPrice; 

      //IF QUANTITY IS MORE THAN X THEN PRICE IS X 
      switch(true) { 
       case (qty <= 2): 
        QtyPrice = '12.95'; 
        priceTable.find('tr:first-child').css('background', 'none'); 
        break; 
       case (qty >=3 && qty <= 4): 
        QtyPrice = '12.30'; 
        priceTable.find('tr:first-child').css('background', '#ccc'); 
        priceTable.find('tr:nth-child(2)').css('background', 'none'); 
        break; 
       case (qty >=5 && qty <= 9): 
        QtyPrice = '11.65'; 
        priceTable.find('tr:first-child').css('background', 'none'); 
        priceTable.find('tr:nth-child(2)').css('background', '#ccc'); 
        priceTable.find('tr:nth-child(3)').css('background', 'none'); 
        break; 
       case (qty >=10): 
        QtyPrice = '10.95'; 
        priceTable.find('tr:nth-child(2)').css('background', 'none'); 
        priceTable.find('tr:nth-child(3)').css('background', '#ccc'); 
        break; 
      } 

      jQuery('#qty').val(currentQty.value); 

      calPrice = (QtyPrice * currentQty.value); 
      newPrice.html('£' + calPrice.toFixed(2)); 
     } 

     return false; 
    }); 

ここではアクションである：

私は少しオフ私の計算であってもよいですどんな助けでも大歓迎です。

Answer 1

あなたの完全なコードを見たので私の答えを書き換えてください。 currentQty.value--;

qtyの値は、この時点では変更されません。

あなたは var qty = currentQty.valueを設定している

、およびそのあとは値を変更しています。価格を計算するときにスイッチと同じようにcurrentQty.valueに直接アクセスするか、値を変更した後にqtyが定義されていることを確認してください。

ここでは、大量のコードを再現していることも指摘します。新しい数量を反映するためにUIを更新するコードをリファクタリングすることは、おそらく最初にこの問題を回避するのに役立ちました。

はこのような何かをやって考えてみましょう：

downBtn.click(function(){ 
    document.getElementById('qty_extention').value--; 
    updatePrice(); 
}); 

upBtn.click(function(){ 
    document.getElementById('qty_extention').value++; 
    updatePrice(); 
}); 

function updatePrice() { 
    var qty = document.getElementById('qty_extention').value; 
    // set both new price and table highlights here according to updated price 
} 

#qty_extention場合は読み取り専用ではありません、それは手動の場合、誰かに、changeイベントのあなたのボタンを使用せずに新しい数量を入力するにはあなたもupdatePriceを実行する必要があります。