Anzahl Preis pro Menge und zeigen Sie es auf einzelne Gesamtbox ​​über Javascript in PHP

Question

Ich bekomme ein Problem, das ich While-Schleife zum Abrufen aller Angebote aus meiner Datenbank verwenden. Alle Angebote Inhalt Name, Preis. Ich möchte tun ist Angebot Preis muss mit Menge zählen (die von Benutzer aktualisiert werden) und zeigen insgesamt in einer Box.

mein Code

<script type="text/javascript"> 
    $('#qty<?php echo $row1['sln_cart_id']; ?>, #price<?php echo $row1['sln_cart_id']; ?>').on('input',function() { 
    var qty = parseInt($('#qty<?php echo $row1['sln_cart_id']; ?>').val()); 
    var price = parseFloat($('#price<?php echo $row1['sln_cart_id']; ?>').val()); 
    $('#total<?php echo $row1['sln_cart_id']; ?>').val((qty * price ? qty * price : 0).toFixed(2)); 
    }); 
</script> 
<td class="qty"> 
    <input type='text' name='qty' id='qty<?php echo $row1['sln_cart_id'] ?>' value='1' /> 
</td> 
<td class="unit-price hidden-xs"> 
    <span class="currency"> 
    Rs 
    </span> 
    <input type='text' name='price' id='price<?php echo $row1['sln_cart_id'] ?>' value='<?php echo $row1['sln_offer_price'] ?>' /> 
</td> 
<td class="total-price"> 
    <span class="currency"> 
    Rs 
    </span> 
    <input type='text' name='total' id='total<?php echo $row1['sln_cart_id'] ?>' value='' /> 
</td> 

Eigentlich i wie mein Ergebnis wollen. sehen Sie bitte diesen Link, so werden Sie die richtige Richtung https://www.nearbuy.com/deal/ahmedabad/bodakdev/Black-Stain-Tattoo-Studio-14822/14822?list=Home%20Page

hier ist Zähler Menge pro Menge

$('#qty, #price').on('input', function() { 
 
    var qty = parseInt($('#qty').val()); 
 
    var price = parseFloat($('#price').val()); 
 
    $('#total').val((qty * price ? qty * price : 0).toFixed(2)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<td class="qty"> 
 
    <input type='text' name='qty' id='qty' value='1' /> 
 
</td> 
 
<td class="unit-price hidden-xs"> 
 
    <span class="currency"> 
 
         Rs 
 
        </span> 
 
    <input type='text' name='price' id='price' value='100' /> 
 
</td> 
 
<td class="total-price"> 
 
    <span class="currency"> 
 
         Rs 
 
        </span> 
 
    <input type='text' name='total' id='total' value='' /> 
 
</td>

while-Schleife ----

<?php 
      $sql1= "SELECT * FROM sln_customer_cart WHERE sln_customer_id='".$_SESSION['getincusid']."'"; 
      $result1= mysql_query($sql1); 
      while($row1= mysql_fetch_array($result1)) 
      { 
      ?> 
      <tr> 
       <td class="image hidden-xs"> 
       <?php $sql2="SELECT * FROM sln_vendor_deals WHERE sln_deal_id='".$row1['sln_deal_id']."'"; $result2= mysql_query($sql2); while($row2= mysql_fetch_array($result2)){ echo $row2['sln_deal_name'];} ?> 
       </td> 
       <td class="details"> 
       <div class="clearfix"> 
        <div class="pull-left"> 
        <a href="#" class="title"> 
         <?php echo $row1['sln_offer_name']; ?> 
        </a> 
        </div> 
        <div class="action pull-right"> 
        <div class="clearfix"> 
         <button class="btn-danger btn-raised ripple-effect"> 
         <i class="ti-trash"> 
         </i> 
         </button> 

        </div> 
        </div> 
       </div> 
       </td> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
       <script type="text/javascript"> 
       $('.qtyin, .pricein').on('input', function() { 
         var row = $(this).closest("tr"); 
         var qty = parseInt(row.find('.qtyin').val()); 
         var price = parseFloat(row.find('.pricein').val()); 
         row.find('.totalout').val((qty * price ? qty * price : 0).toFixed(2)); 
        }); 
       </script> 
       <td class="qty"> 
       <input type='text' name='qty' class="qtyin" id='qty' value='1' /> 
       </td> 
       <td class="unit-price hidden-xs"> 
       <span class="currency"> 
        Rs 
       </span> 
       <input type='text' name='price' class="pricein" id='price' value='<?php echo $row1['sln_offer_price'] ?>' /> 
       </td> 
       <td class="total-price"> 
       <span class="currency"> 
        Rs 
       </span> 
       <input type='text' name='total' class="totalout" id='total' value='' /> 
       </td> 
      </tr> 
      <?php 
      } 
      ?> 

Answer 1

erhalten Anstatt eine Ereignisbindung für jede ID in PHP zu erstellen, geben Sie die Elementklassen an Verwenden Sie DOM-Traversalfunktionen, um die Elemente in derselben Zeile zu finden. Dann brauchen Sie nur eine einzige Bindung für die Klassen.

Der jQuery-Code sollte nicht in der while Schleife sein. Es sollte nur einmal durchgeführt werden, da es an alle Elemente mit derselben Klasse gebunden ist.

$(document).ready(function() { 
 
    $('.qtyin, .pricein').on('input', function() { 
 
     var row = $(this).closest("tr"); 
 
     var qty = parseInt(row.find('.qtyin').val()); 
 
     var price = parseFloat(row.find('.pricein').val()); 
 
     row.find('.totalout').val((qty * price ? qty * price : 0).toFixed(2)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="qty"> 
 
     <input type='text' name='qty' class='qtyin' value='1' /> 
 
    </td> 
 
    <td class="unit-price hidden-xs"> 
 
     <span class="currency"> 
 
         Rs 
 
        </span> 
 
     <input type='text' name='price' class='pricein' value='100' /> 
 
    </td> 
 
    <td class="total-price"> 
 
     <span class="currency"> 
 
         Rs 
 
        </span> 
 
     <input type='text' name='total' class='totalout' value='' /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="qty"> 
 
     <input type='text' name='qty' class='qtyin' value='1' /> 
 
    </td> 
 
    <td class="unit-price hidden-xs"> 
 
     <span class="currency"> 
 
         Rs 
 
        </span> 
 
     <input type='text' name='price' class='pricein' value='100' /> 
 
    </td> 
 
    <td class="total-price"> 
 
     <span class="currency"> 
 
         Rs 
 
        </span> 
 
     <input type='text' name='total' class='totalout' value='' /> 
 
    </td> 
 
    </tr> </table>