在我的产品模板页面中，我有以下代码：
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
我正在使用JavaScript代码段根据客户的选择隐藏变体。我想为我的所有产品使用一个代码段文件，但无法使用javascript读取以下内容：
var productSelect = "ProductSelect-{{ section.id }}";
我该怎么做？我的替代方法是，我为每个产品都有一个摘要文件，尽管可能，但它又长又费力。 任何想法将不胜感激。
答案 0 :(得分：0)
您遇到的问题是{{ section.id }}是模板变量。在呈现的HTML中，该部分将替换为适当的变量。一旦您的JavaScript运行，页面上的任何属性中都将不会出现带有双大括号的元素。
有几种方法可以解决此问题：
要执行此操作，您需要在某个地方可以将节ID与页面上已加载的节相关联，从而将该数据段与您的代码片段在运行时已经知道的内容联系起来。
例如，如果您的代码段知道要更改的任何产品的产品句柄，则可以在表单内添加如下内容：
<script>
// If our lookup object already exists, do nothing. Otherwise, initialize it as an empty object
window.section_lookup = window.section_lookup || {};
//Now save the section ID using the product's handle
//Using the json filter when we print Liquid variables to Javascript ensures that the resulting value is always Javascript-legal.
section_lookup[{{ product.handle | json}}] = {{ section.id | json }};
</script>
现在，在您的查询代码中，您可以使用：
// Assuming that you have a variable called product_handle already
var productSelect = "ProductSelect-" + section_lookup[product_handle];
这将为您提供所需的特定ID。
form对象的力量您的代码段是否在某些上下文中运行，并且您对包含所需select元素的任何元素有所了解？例如，您是否已经知道表单或产品区域包装器？
如果您的form包含您的选择框，则说明您是黄金。每个表单都知道其中包含的所有表单域的名称。由于字段的名称为id，因此从表单对象转到右侧的选择框非常容易：
// Assuming you have a variable named form representing the correct form, access the form field with the name 'id'
var idField = form['id'];
注意：：如果您的表单是jQuery选择的，则您可能不会具有该功能。幸运的是，如果您被jQuery包裹的对象卡住了，您可以像这样轻松地将其解包：
// Assuming somebody gave you a variable named $form that they jQuery-selected....
var form = $form[0];
var idField = form['id'];
如果您没有表单，但是可以快速访问表单中的任何其他输入，那么您也很幸运-每个表单元素（即：输入，选择，文本区域，字段集...）知道它属于什么形式。
// Assuming that there is a variable named target which is a form element contained in the same form as the ID field that we want:
var form = target.form;
var idField = form['id'];
如果您知道某些包装元素包含所需的选择框，并且不包含不需要的选择框，则可以将查询选择器约束为仅在包装内部查看。这样，您将只找到所需的元素。
如果您使用的是普通的“香草” JavaScript：
//Assuming we have a variable named product_wrapper
var idField = product_wrapper.querySelector('[name="id"]');
或者，如果您更喜欢jQuery：
//Still assuming that we have a variable named product_wrapper
var idField = jQuery('[name="id"]', product_wrapper);
希望您可以使用至少一种方法找到成功。祝你好运！