Warum markiert es nicht an der richtigen Nummer?

Question

Ich habe eine Menge Box auf meiner Produktseite, dass, wenn Sie die Menge erhöhen oder verringern eine Box hervorheben, welchen Rabatt Sie erhalten, aber aus irgendeinem Grund hebt es 3 Pack oder mehr, wenn es auf 4 sogar meine Berechnung zu markieren wann die Menge ist> = 3

mein Code:

  //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; 
    }); 

hier ist es in Aktion:

ich meine Berechnung ein bisschen off haben Jede Hilfe würde sehr geschätzt werden.

Answer 1

Komplette Neuschreibung meiner Antwort jetzt, dass wir Ihren vollständigen Code gesehen haben.

Sie var qty = currentQty.value setzen und nach diesen Sie ändern den Wert: currentQty.value--;

Der Wert qty wird an dieser Stelle nicht geändert werden. Greifen Sie entweder direkt in Ihrem Switch auf currentQty.value zu, wie Sie es bei der Preisberechnung tun, oder stellen Sie sicher, dass qty definiert ist, nachdem Sie den Wert geändert haben.

Ich würde auch darauf hinweisen, dass Sie hier große Mengen an Code reproduzieren. Das Refactoring des Codes, der die Benutzeroberfläche aktualisiert, um die neue Menge widerzuspiegeln, hätte Ihnen wahrscheinlich geholfen, dieses Problem von vornherein zu vermeiden.

Betrachten Sie so etwas wie dies zu tun:

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 
} 

Wenn #qty_extention nicht nur lesbar ist, können Sie auch updatePrice laufen sollte es change Fall ist, falls jemand gibt manuell eine neue Menge, ohne die Verwendung der Tasten.