Javascript/jQuery:如何从另一个类获取数据值

问题描述

问题是，当我在购物车页面中添加不止一种产品时，我想要获得所有产品标题和数量，例如以下示例:第一产品标题，3-第二产品标题，1-... ，但是当我尝试与我共享的代码时，我只会得到第一个产品的数据，但是对于其他产品，我没有任何数据，所以我想获取class2数据，因为此类收集数据购物车页面中所有产品的名称(标题+每个产品的数量)，希望我已经清楚地解释了

The issue is when I add more than 1 product in the Cart Page I want to get all product titles and quantities like this example: 1st Product Title, 3 - 2nd Product Title, 1 - ... but when I try with the code I'm sharing with you bellow I get only data of the first product but for other products I don't get any data, so I want to get class2 data because this class collect data of all products in the cart page (title + quantity of each product), hope I've explained it clearly

表单代码:

<label class="title-form">Shipping Information</label>
<form class="form" id="form" target="_self" onsubmit="return postToGoogle();" action="" autocomplete="off">

<div class="data-form" style="">

<div class="field mb-2">
    <input placeholder="Name" id="nameField" name="entry.638007929" type="text" required>
</div>

<div class="field mb-2">
    <input placeholder="Phone" id="mobField" name="entry.1319098236" type="text" required>
</div>

<div class="field mb-2">
    <input placeholder="Address" id="addressField" name="entry.1908756447" type="text" required>
</div>

{% for line_item in cart.items %}
  <input type="hidden" name="entry.992799284" class="class1" value="{{line_item.product.title}}, {{line_item.quantity}} -">
  <span class="class2">{{line_item.product.title}}, {{line_item.quantity}} - </span>
{% endfor %}

</div>

<button class="button_get order_button btn btn-pink js_submit button__text orderButton" id="send" type="submit">
Confirm
</button>

</form>

JavaScript代码:

Javascript code:

<script type="text/javascript">
function postToGoogle() {
var field1 = $("#nameField").val();
var field2 = $("#mobField").val();
var field3 = $("#addressField").val();
var field4 = $(".class1").val();

if(field1 == ""){
alert('');
document.getElementById("nameField").focus();
return false;
}
if(field2 == ""){
alert('');
document.getElementById("mobField").focus();
return false;
}
if(field3 == ""){
alert('');
document.getElementById("addressField").focus();
return false;
}
if(field4 == ""){
alert('');
document.getElementByClassName("class1").focus();
return false;
}

$.ajax({
url: "https://docs.google.com/forms/d/XXXXXXXXXX/formResponse?",
data: {"entry.638007929": field1, "entry.1319098236": field2, "entry.1908756447": field3, "entry.992799284": field4},
type: "POST",
dataType: "xml",
success: function(d){}
});

return false;
}

</script>

感谢您提出任何使该功能正常工作的建议！

Thank you for any suggestions to make this function working!

推荐答案

您可以使用 jquery .each()，并通过推入保存到数组中.

You can get data of all class2 span using jquery .each(), and with push save into array.

var arr=[];
$(".class2").each(function(){
 arr.push($(this).html());
});

console.log(arr); // log all the title
$(".class1").val(arr); // this will add all the class2 span data into hidden field

现在变量arr保留所有class2 span内容，您可以将其绑定到class1隐藏字段.

Now variable arr hold all class2 span content, and you can bind it to class1 hidden field.

这篇关于Javascript/jQuery:如何从另一个类获取数据值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！