[英]Compare two variables with generated numbers
目前,我學習PHP的曲線,並且第一次嘗試向我的PHP腳本提出AJAX請求。 為了自己的學習目的,我在自己的書面商店中購買了購物車,它為每個位置生成具有相同“ data-id”屬性的按鈕和輸入字段。 當然,輸入字段具有當前產品數量的“值”屬性。
碼:
jQuery的:
$(document).ready(function() {
$(".btn").click(function () {
var id = $(this).attr("data-id");
var idInput = $(".field").attr("data-id");
var value = $(".field").attr("value");
if (id === idInput) {
$.post("/cart/addAjax/" + id, {}, function (data) {
$("#cart-count").html(data);
});
$.post("/cart/addAjax/" + value, {});
return false;
} else {}
});
});
PHP生成的HTML的輸入示例:
<input class="field" data-id="3" type="number" value="23">
<button class="btn" data-id="3">Quantity</button>
<input class="field" data-id="14" type="number" value="3">
<button class="btn" data-id="14">Quantity</button>
<input class="field" data-id="17" type="number" value="2">
<button class="btn" data-id="17">Quantity</button>
<input class="field" data-id="18" type="number" value="8">
<button class="btn" data-id="18">Quantity</button>
<input class="field" data-id="19" type="number" value="10">
<button class="btn" data-id="19">Quantity</button>
我想讓Jquery腳本比較輸入/按鈕的“ data-id”屬性並將選定的“ data-id”屬性請求的“ value”發送到PHP端,但是不知道如何告訴腳本從選定的“ data”中獲取“ value” -id”,猜測其原因是其POST成功僅針對購物車中的第一個生成的產品成功,而其余產品腳本不起作用。 有人可以啟發我如何實現這一目標嗎? 感謝您的建議。
您需要更好地構造html。
我對html進行了一些更改,並將每個btn
和field
放在div下。
這將使通過btn click
來查找所選輸入更加容易。
閱讀評論以了解。
$(document).ready(function() { $(".btn").click(function () { var id = $(this).attr("data-id"); // now go to the selected btn Parent, and then find the .field // there you are sure its the right field becouse both the button // and the field is containe under one div{Parent} var idInput = $(this).parent().find(".field") console.clear(); console.log("you Selected id " +id + " and its value is " + idInput.val()) }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input class="field" data-id="3" type="number" value="23"> <button class="btn" data-id="3">Quantity</button> </div> <div> <input class="field" data-id="14" type="number" value="3"> <button class="btn" data-id="14">Quantity</button> </div> <div> <input class="field" data-id="17" type="number" value="2"> <button class="btn" data-id="17">Quantity</button> </div> <div> <input class="field" data-id="18" type="number" value="8"> <button class="btn" data-id="18">Quantity</button> <div> <input class="field" data-id="19" type="number" value="10"> <button class="btn" data-id="19">Quantity</button> </div>
$('button').on('click',function(){ var data = $(this).data('id'); var url = 'your php file'; $.post(url,data,function(rdata){ //do whatever yo want with returned data }); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.