對多個元素使用相同的 JQuery function

Question

我目前正在使用 Flask 學習 web 開發。 我被困在一個地方，我想使用 jquery function 從輸入標簽中返回相應行的值。

這是我的 HTML：

 enter code here {% extends "base.html" %} {% block title %} Menu item {% endblock %} {% block content %} <div class="container"> <div class="row"> <table class="table table-striped table-inverse table-responsive"> <thead class="thead-inverse"> <tr> <th>Item Name</th> <th>Amount</th> <th></th> </tr> </thead> <tbody> <form> {% for item in menu_category %} <tr> <td scope="row">{{item.item_Name}}</td> <td>{{item.item_Price}}</td> <td> <input type="hidden" class="form-control test" name="item_id{{ loop.index0 }}" id="itemID" placeholder="" value="{{ item.item_Id }}"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> {% endfor %} </form> </tbody> </table> </div> <p id=result>cart: </p> </div> {% endblock %}

這是我的 Jquery function：

    <script>
    $(function() {
        $('.clsAddToCart').bind('click', function() {
          $.getJSON('{{ url_for("func_add_to_cart") }}', {
            productID: $("input[name^='item_id']").val(),
        }, function(data) {
            $("#result").html(data.result);
        });
        return false;
        });
        });
   </script>

我只希望 function 在按鈕單擊時返回相應的項目 id，但不知何故，它總是只為所有人返回第一個項目 id。

非常感謝！

Answer 1

val方法的 jQuery文檔在第一行解釋了這一點：

獲取匹配元素集中第一個元素的當前值或設置每個匹配元素的值。

（重點是我展示您問題的相關部分）。

對於要處理相應輸入的每個“添加到購物車”按鈕，您可以使用$(this)來獲取單擊的特定按鈕，然后使用例如prev方法（因為在您的 HTML 中，輸入是前面的兄弟 - 你可以做一些更復雜的事情來使它對你的 HTML 的變化更加健壯，但如果你需要它們，我會讓你弄清楚）：

$(function() {
  $('.clsAddToCart').bind('click', function() {
    $.getJSON('{{ url_for("func_add_to_cart") }}', {
      productID: $(this).prev().val(),
    }, function(data) {
      $("#result").html(data.result);
    });
    return false;
  });
});

Answer 2

您正在將所有輸入元素設置為相同的 id ('itemID')。 應該像：'item{{ item.item_Id }}'。 可能這可以解決您的問題。

您的 jQuery function 應該是這樣的：

    <script>
    $(function() {
        $('.clsAddToCart').bind('click', function() {
          $.getJSON('{{ url_for("func_add_to_cart") }}', {
            productID: $(this).closest('input').val(), //<==
        }, function(data) {
            $("#result").html(data.result);
        });
        return false;
        });
        });
   </script> 

Answer 3

為了獲得正確input元素的值，您必須使用單擊事件的上下文。 this關鍵字指的是被點擊的元素。 因此，您可以使用它來使用相對定位來定位正確的input元素this 。 根據您的結構，以下任何一項都可以替代$("input[name^='item_id']").val() ：

$(this).siblings().val(); //OR
$(this).closest('td').find('input').val(); //OR
$(this).parent().children('input').val(); //AND SO ON AND SO FORTH

請記住：

1. .bind()自 v3 起已棄用，因此請使用.on()
2. 保持你所有的 id 屬性唯一，如果你不需要它們就不需要它們。

 $(function() { $('.clsAddToCart').on('click', function() { console.log( $(this).siblings().val() ); /*$.getJSON('{{ url_for("func_add_to_cart") }}', { productID: $("input[name^='item_id']").val(), }, function(data) { $("#result").html(data.result); }); return false;*/ }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <table class="table table-striped table-inverse table-responsive"> <thead class="thead-inverse"> <tr> <th>Item Name</th> <th>Amount</th> <th></th> </tr> </thead> <tbody> <form> <:--{% for item in menu_category %}--> <tr> <td scope="row">Item Name 1</td> <td>100</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID1" placeholder="" value="id1"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 2</td> <td>200</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID2" placeholder="" value="id2"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 3</td> <td>300</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID3" placeholder="" value="id3"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 4</td> <td>50</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID4" placeholder="" value="id4"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <!--{% endfor %}--> </form> </tbody> </table> </div> <p id=result>cart: </p> </div>