JQuery列表中的多个按钮，指定点击了哪个答案

【问题标题】：JQuery multiple buttons in a list, specify which one was clickedJQuery列表中的多个按钮，指定点击了哪个
【发布时间】：2014-06-09 18:48:07
【问题描述】：

我正在显示产品列表。每个li 包含一个带有产品库存代码select 的h2，它允许用户选择要订购的数量和一个订单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>

【问题讨论】：

你能发布渲染的html吗？
为什么要提出一个新问题 stackoverflow.com/questions/24116012/… ？你本来可以修改之前的。
服务器端代码有点难读，但 H3（和其他元素）是 UL 的直接子代吗？
@shaunakde 这是一个不同的问题，上一个问题是关于为什么我的按钮在点击时没有被注册，这个问题与我如何获得特定 li 的值有关该按钮与之相关联。
那么你有无效的标记，浏览器会改变它来尝试纠正你的错误，你的javascript选择器将永远无法工作。

标签： javascript jquery html cookies

【解决方案1】：

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

请看下面的代码。

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 在页面中应该是唯一的。

【讨论】：