Javascript JQuery列表中的多个按钮，指定单击了哪个按钮

我正在显示产品列表。每个

li

都包含一个带有产品库存代码的

h2

，

select

允许用户选择要订购的数量，以及一个订单

按钮，单击该按钮将向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>


呈现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>


CBL202659/A
说明：卡万盒


每托盘数量：420

数量
0
1.
2.
3.
CBL201764
说明：Aldi大卡万盒


每托盘数量：420

数量
0
1.
2.
3.
CBL20004/A
说明：卡文盒6lb单托盘盒


每托盘数量：840

数量
0
1.
2.
3.
空腔箱SGLE CL
描述：单色外盒盒


每托盘数量：1000

数量
0
1.
2.
3.
CAV箱SGLE BR
说明：单外平面Cav盒


每托盘数量：1000

数量
0
1.
2.
3.
CAV箱半CL
说明：单外半板条箱颜色


每托盘数量：1000

数量
0
1.
2.
3.
CAV盒半BR
说明：单外半板条箱普通


每托盘数量：1000

数量
0
1.
2.
3.
CAV盒DBLE CL
说明：双外彩色Cav盒


每托盘数量：500

数量
0
1.
2.
3.
CAV盒DBLE BR
说明：双外平面Cav盒


每托盘数量：499

数量
0
1.
2.
3.

基于我对您问题的理解，我创建了一个小提琴来帮助您解决问题

请看下面的代码

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>

$(".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);
 });


请注意，我已经删除了
id=“stock\u code”
，因为
id
在页面中应该是唯一的。
您可以发布呈现的html吗？为什么要提出新问题？你可以修改前面的。服务器端代码有点难读，但是H3（和其他元素）是UL的直接子元素吗？@shaunakde这是另一个问题，前面的问题是为什么我的按钮没有在点击时注册，这与我如何获取按钮关联的特定
li
的值有关。然后，您的标记无效，浏览器将更改它以尝试更正错误，并且您的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);
 });