Javascript/jQuery：如何从另一个类获取数据值答案

【问题标题】：Javascript/jQuery: how to get data value from another classJavascript/jQuery：如何从另一个类获取数据值
【发布时间】：2020-05-25 19:50:02
【问题描述】：

问题是当我在购物车页面中添加超过 1 个产品时，我想获取所有产品标题和数量，例如：1st Product Title, 3 - 2nd Product Title, 1 - ... 但是当我尝试使用下面与您分享的代码时，我只得到第一个产品的数据，但对于其他产品，我没有得到任何数据，所以我想得到 class2 数据，因为这个类收集数据购物车页面中的所有产品（每个产品的标题+数量），希望我已经解释清楚了

表格代码：

<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 代码：

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

感谢您为使此功能正常工作的任何建议！

【问题讨论】：

您想在哪里保存 class2 数据？在数组中？
嗨@Satindersingh，我想将class2保存在class1 value=""
真的没有确定您的具体问题在哪里，以及在所有显示的代码中什么有效或无效
当我在购物车页面中添加超过 1 个产品时，我想获取所有产品标题和数量，例如：1st Product Title, 3 - 2nd Product Title, 1 - ... 但是当我尝试使用上面共享的代码时，我只得到第一个产品的数据，但对于其他产品我没有得到任何数据，所以我想得到 class2 数据，因为这个类收集数据购物车页面中的所有产品（每个产品的标题+数量），希望我已经解释清楚了

标签： javascript jquery google-sheets google-sheets-api google-forms

【解决方案1】：

不确定您的意思，但这会从class2 获取文本并将其作为前一个元素的值插入 (class1)

$.each($(".class2"), function() {
	$(this).prev(".class1").val($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">3rd Product Title, 1 - </span>

<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">2nd Product Title, 1 - </span>

<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">1st Product Title, 1 - </span>

【讨论】：

【解决方案2】：

您可以使用 jquery .each() 获取所有class2 span 的数据，并通过 push 保存到数组中。

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保存了所有class2span内容，你可以将它绑定到class1隐藏字段。

【讨论】：