Setzen Wert von HTML-Element von Javascript

Question

Ich benutze Sitzungsvariable, um die Elemente im Warenkorb zu verfolgen. Ich erzeuge eine Tabelle mit einer Schleife, um den Inhalt des Warenkorbes anzuzeigen. Der Code für die Tabelle ist wie folgt:

<?php 
    $count=0; 
    $grandTotal=0; 
    foreach($_SESSION['cart'] AS $product) { 
    $table=$product['table']; 
    $id=$product['id']; 
    $Name=$product['name']; 
    $qty=$product['quantity']; 
    $price=$product['price']; 
    $total=$qty*$price; 
    $grandTotal +=$total; 
?> 

<tr> 
    <td class="cart_product"> 
     <img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150"> 
    </td> 
    <td class="cart_description"> 
     <h4><a href=""><?php echo $Name?></a></h4> 
     <p><?php echo "Web ID: ".$id?></p> 
    </td> 
    <td class="cart_price"> 
     <p><?php echo $price?></p> 
    </td> 
    <td class="cart_quantity"> 
     <div class="cart_quantity_button"> 
      <a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a> 
      <input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2"> 
      <!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>--> 
      <a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decreament" > - </a> 
     </div> 
    </td> 
    <td class="cart_total"> 
     <p class="cart_total_price"><?php echo $total ?></p> 
    </td> 
    <td class="cart_delete"> 
     <a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a> 
    </td> 
</tr> 

<?php 
    } 
    $tax=0.15*$grandTotal; 
?> 

I Problem innerhalb a Tags mit + und - Tasten habe. Ich möchte den Wert im Eingabefeld quantity erhöhen oder verringern. Aber da ich eine Tabelle in einer Schleife erzeuge, kenne ich die ID von jedem Feld nicht. Ich möchte so etwas tun:

<script> 
    $(document).ready(function() { 
     $("#increment").click(function() { 
      var oldval=document.getElementById("qty").value; 
      var newval=parseInt(oldval); 
      document.getElementById("qty").value=newval++; 
     }); 
    }); 
</script> 

Aber diese Methode inkrementiert immer erste Menge Feld in der Tabelle. Wie bekomme ich IDs von anderen Mengenfeldern in der Tabelle?

Answer 1

Verwenden Sie nicht IDs innerhalb loop.Just Nutzungsklasse für das> überprüfen Sie die Schnipsel für eine smaple Demo

$(document).ready(function() { 
 
     $(".increment").click(function() { 
 
      var oldval = $(this).prev('.qty').val(); 
 
      
 
      var newval = parseInt(oldval)+ 1; 
 
      
 
      $(this).prev('.qty').val(newval); 
 
     }); 
 
     $(".decrement").click(function() { 
 
      var oldval = $(this).next('.qty').val(); 
 
      
 
      var newval = parseInt(oldval) - 1; 
 
      
 
      $(this).next('.qty').val(newval); 
 
     }); 
 
     
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> <tr> 
 
       <td>sl No</td> 
 
       <td>name</td> 
 
       <td>Dept</td> 
 
       <td>dummy</td> 
 
       <td>dummy</td> 
 
       <td>dummy</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>1</td> 
 
       <td>name</td> 
 
       <td> 
 
        
 

 
       </td> 
 
       <td>name</td> 
 
       <td>name</td> 
 
       <td> </td> 
 
      </tr> 
 

 

 
      <tr> 
 
       <td>2</td> 
 
       <td>name</td> 
 
       <td>Dept</td> 
 
       <td>name</td> 
 
       <td> <button class="decrement"> - </button> 
 
        <input type="text" class="qty" value="1"/> 
 
        <button class="increment">+ </button> 
 
        </td> 
 
       <td>name</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>3</td> 
 
       <td>name</td> 
 
       <td>name</td> 
 
       <td>name</td> 
 
       <td>name</td> 
 
       <td>name</td> 
 
      </tr> 
 

 

 
     </table>

Answer 2

Verwenden gleiche ID nicht für stattdessen mehrere Elemente Klasse wie verwenden unter

<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" class="increment"> 

gleiche Fall von Benutzerklasse Dekrement Taste

<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decreament" class="decreament"> - </a> 

Sie binden Ereignis dieser Anker und ändern klicken können die Menge in der Eingabe innerhalb desselben Elternteils div

$(function(){ 
    $('.increment').on('click', function(){ 
     var $parent = $(this).closest('.cart_quantity_button'); 
     var $input = $parent.find('.cart_quantity_input'); 
     var value = $input.val(); 
     value = parseInt(value)+1; 
     $input.val(value); 
    }); 
    $('.decreament').on('click', function(){ 
     var $parent = $(this).closest('.cart_quantity_button'); 
     var $input = $parent.find('.cart_quantity_input'); 
     var value = $input.val(); 
     value = parseInt(value)-1; 
     $input.val(value); 
    }); 
}); 

Answer 3

Es gibt zwei Lösungen für dieses Problem:

1. Wenn Tabelle mit PHP zu erzeugen, zuweisen eindeutige ID zu jeder Zeile <a> und <input>, wie #increment_id8878 und #input_id8878. Wenn Sie dann auf #increment oder #decreament klicken, betätigen Sie <input> mit der entsprechenden ID.

2. Bedienung <input> Element mit jQuery relativen Selektor.

Zum Beispiel:

$('.increment').click(function() { 
    var inputEle = $(this).siblings('input'); 
    var originVal = inputEle.val(); 
    inputEle.val(parseInt(originVal) + 1); 
}); 

A jsfiddle für die zweite Lösung hergestellt wird.

BTW, doppelte ID sollte in HTML-Code vermieden werden.