jQuery erweiterte Domnavigation

Question

Die Situation aktualisiert Einkaufswagen mit Javascript. Das Ereignis kommt von der Änderung der Artikelvariation von select name = "variation-1". Es gibt viele .shop-Artikel. Wie Griff Eingabe zu erhalten, die Daten-Produkt-ID hat, wenn Sie = $ (this) aus der Änderung von select name = „Variation-1“

<div class="product-tools shop-item"> 
    <div class="count-input"> 
     <a class="incr-btn" data-action="decrease" href="#">–</a> 
     <input class="quantity" type="text" data-product-id="7" value="3"> 
     <a class="incr-btn" data-action="increase" href="#">+</a> 
    </div><!-- .count-input -->       
    <div class="form-element"> 
     <select name="variation-1" class="form-control form-control-sm variation-select" data-toggle="tooltip" title="" data-original-title="color"> 
      <option value="blue">blue</option>       
      <option value="red" selected="">red</option> 
     </select> 
    </div> 
    <div class="form-element"> 
     <select name="variation-2" class="form-control form-control-sm variation-select" data-toggle="tooltip" title="" data-original-title="size"> 
      <option value="S">S</option>       
      <option value="M">M</option>       
      <option value="L">L</option>       
      <option value="XL" selected="">XL</option>       
      <option value="XXL">XXL</option>    
     </select> 
    </div> 
</div> 

Answer 1

haben Dieses sollten Sie die Produkt-ID aus dem Stand der Eingabe erhalten . Er durchquert auf den umschließenden „Shop-Artikel“ div, und dann sucht innerhalb des für die Eingabe mit der „Menge“ Klasse, die das Produkt-it Datenattribut hat:

var productID = $(this).closest(".shop-item").find(".quantity").data("product-id"); 

Alternativ, wenn Sie möchten, finden Sie das aktuelle Element, das die „Daten-Produkt-ID“ -Attribut hat, können Sie das tun, was in den Kommentaren unten vorgeschlagen wird:

var input = $(this).closest(".shop-item").find("[data-product-id]");