我正在显示产品列表。每个li都包含一个h2，其中包含产品库存代码select，用户可以选择要订购的数量和订单button，点击后会添加库存代码和数量到一个cookie。
目前我已经开始工作，所以当点击按钮时，它会打印第一个股票代码和所选数量。但是，我想告诉JQuery点击了哪个按钮，以便我可以获得与之关联的li元素的值：
这是我的html
<?php if($products): ?>
<ul>
<?php foreach($products as $product): ?>
<h3 id="stock_code" class="stock_code"><?= get_field('stock_code', $product->ID); ?></h3>
<p>Description: <?= get_field('description', $product->ID); ?></p>
<p>Quantity Per Pallet: <?= get_field('quantity_per_pallet', $product->ID); ?></p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount<?= $product->ID; ?>" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<?php endforeach; ?>
</ul>
<? endif ?>
<? endwhile; ?>
<section class="order-alert">
<a href="#">Your Order</a>
<p>You have <span id="order_counter">0</span> items in your order</p>
</section>
这是我的js，目前只输出第一个li
$(".orderBtn").click(function(event){
//Show the order Box
$(".order-alert").show();
event.preventDefault();
//Create the Array
var productArray = [];
//Get reference to the product clicked
$stockCode = $(".stock_code").html();
console.log($stockCode);
//Get reference to the quantity selected
$quantity = $(".order_amount").val();
console.log($quantity);
//If no Cookie exists, create one and add the Array
if ($.cookie('order_cookie') === undefined) {
console.log("Create a new cookie");
//Add items to Array
//Add Array to Cookie
$.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
//If the Cookie already exists do this
} else {
console.log("Read the cookie");
productArray = JSON.parse($.cookie('order_cookie'));
console.log($.cookie('order_cookie'));
//Append items onto the Array
}
//Display the number of items in the Array in the Order Box
$('#order_counter').html(productArray.length);
});
呈现HTML
<ul>
<h3 id="stock_code" class="stock_code">CBL202659/A</h3>
<p>Description: Cavan Box <br />
</p>
<p>Quantity Per Pallet: 420</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount421" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CBL201764</h3>
<p>Description: Aldi Large Cavan Box <br />
</p>
<p>Quantity Per Pallet: 420</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount419" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CBL20004/A </h3>
<p>Description: Cavan Box 6lb Tray Box Single <br />
</p>
<p>Quantity Per Pallet: 840</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount417" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX SGLE CL </h3>
<p>Description: Single Outer Colour Cav Box <br />
</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount415" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX SGLE BR </h3>
<p>Description: Single Outer Plain Cav Box <br />
</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount413" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX HALF CL </h3>
<p>Description: Single Outer Half Crate Colour <br />
</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount411" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX HALF BR </h3>
<p>Description: Single Outer Half Crate Plain <br />
</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount409" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX DBLE CL </h3>
<p>Description: Double Outer Colour Cav Box <br />
</p>
<p>Quantity Per Pallet: 500</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount407" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
<h3 id="stock_code" class="stock_code">CAV BOX DBLE BR </h3>
<p>Description: Double Outer Plain Cav Box <br />
</p>
<p>Quantity Per Pallet: 499</p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount405" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn" class="orderBtn"/>
</ul>
答案 0 :(得分：0)
根据我对你的问题的理解，我创造了一个帮助你解决问题的小提琴。
请查看以下代码。
<强> HTML ：
<ul>
<li>
<h3 class="stock_code">CBL202659/A</h3>
<p>Description: Cavan Box</p>
<p>Quantity Per Pallet: 420</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount421" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CBL201764</h3>
<p>Description: Aldi Large Cavan Box</p>
<p>Quantity Per Pallet: 420</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount419" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CBL20004/A </h3>
<p>Description: Cavan Box 6lb Tray Box Single</p>
<p>Quantity Per Pallet: 840</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount417" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX SGLE CL </h3>
<p>Description: Single Outer Colour Cav Box</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount415" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX SGLE BR </h3>
<p>Description: Single Outer Plain Cav Box</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount413" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX HALF CL </h3>
<p>Description: Single Outer Half Crate Colour</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount411" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX HALF BR </h3>
<p>Description: Single Outer Half Crate Plain</p>
<p>Quantity Per Pallet: 1000</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount409" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX DBLE CL </h3>
<p>Description: Double Outer Colour Cav Box</p>
<p>Quantity Per Pallet: 500</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount407" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
<li>
<h3 class="stock_code">CAV BOX DBLE BR </h3>
<p>Description: Double Outer Plain Cav Box</p>
<p>Quantity Per Pallet: 499</p>
<!-- Quantity Dropdown -->
Amount
<select id="order_amount405" name="amt" class="order_amount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" class="orderBtn"/>
</li>
</ul>
<section class="order-alert">
<a href="#">Your Order</a>
<p>You have <span id="order_counter">0</span> items in your order</p>
</section>
<强>的JavaScript ：
$(".orderBtn").click(function(event){
//Show the order Box
$(".order-alert").show();
event.preventDefault();
//Create the Array
var productArray = [];
//Get reference to the product clicked
$stockCode = $(this).siblings('.stock_code').html();
console.log($stockCode);
//Get reference to the quantity selected
$quantity = $(this).siblings('.order_amount').val();
console.log($quantity);
//If no Cookie exists, create one and add the Array
if ($.cookie('order_cookie') === undefined) {
console.log("Create a new cookie");
//Add items to Array
//Add Array to Cookie
$.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
//If the Cookie already exists do this
} else {
console.log("Read the cookie");
productArray = JSON.parse($.cookie('order_cookie'));
console.log($.cookie('order_cookie'));
//Append items onto the Array
}
//Display the number of items in the Array in the Order Box
$('#order_counter').html(productArray.length);
});
<强> FIDDLE
请注意，我已删除id="stock_code"，因为id在页面中应该是唯一的。