如何在Liquid中获取HTML元素值并存入变量以执行条件判断？

直接在Liquid中获取已渲染完成的HTML元素值并存入变量是无法实现的，核心原因是两者的执行阶段完全分离：

• Liquid是服务器端渲染语言，在页面发送到用户浏览器前就已执行完毕，生成最终的HTML代码。
• HTML元素是客户端浏览器加载页面后才存在的，此时Liquid代码早已运行结束，无法再读取客户端的元素内容。

两种可行的处理方案 #

1. 若HTML元素值来自后端/预定义数据 #

如果<span id="product_wished_id">value</span>里的value原本就是从Liquid变量或后端数据生成的，直接在生成元素前将值存入Liquid变量即可：

{% assign myvalue = "value" %} <!-- 可替换为实际后端数据，比如product.id、collection.title等 -->
<span id="product_wished_id">{{ myvalue }}</span>

<!-- 直接用myvalue执行条件判断 -->
{% if myvalue == "value" %}
  <!-- 符合条件的逻辑 -->
{% else %}
  <!-- 其他逻辑 -->
{% endif %}

2. 若HTML元素值是客户端动态生成的 #

如果value是用户操作（如点击、输入）后产生的动态值，只能通过JavaScript在客户端获取并处理条件判断：

// 获取元素的文本值
const myvalue = document.getElementById('product_wished_id').textContent.trim();

// 客户端执行条件判断
if (myvalue === "value") {
  // 符合条件时的操作，比如显示指定元素
  document.getElementById('target-element').style.display = 'block';
} else {
  // 不符合条件时的操作
  document.getElementById('target-element').style.display = 'none';
}

内容的提问来源于stack exchange，提问作者Ali Hassan