如何动态控制 Liquid 模板中控件的可见性

Question

在 Liquid 模板中，可以根据条件动态设置控件的可见性。例如，我想要以下输出，但输入文本框应该只在用户单击相应的单选按钮时才可见

<input type="radio" name="questions" value="q1" />Question 1<br />
<input type="text" name="ans1" /><br />
<input type="radio" name="questions" value="q2" />Question 2<br />
<input type="text" name="ans2" /><br />
<input type="radio" name="questions" value="q3" />Question 2<br />
<input type="text" name="ans3" /><br />

Answer 1

Liquid 在服务器端执行，因此这是不可能的。你可以创建逻辑来在加载时隐藏它们，但如果你用 Liquid 编写它，它永远不会改变。

我认为这最好用 JavaScript 来完成。所有 Shopify 主题还包括 jQuery，这将是您的黄金门票。

这是一个例子：

const inputs = {
  'input_1': {
    hides: ['.some_option_1']
  },
  'input_2': {
    hides: ['.some_option_2', '.some_option_3']
  },
  'input_3': {
    hides: []
  }
};

for (let input_key in inputs) {
  const input = $(`[name="${input_key}"]`);

  input.on('click', () => {
    const hides = inputs[input_key].hides.join(',');

    $('.option').show();
    $(hides).hide();
  });
}

像这样使用你的 HTML：

<button name="input_1" placeholder="1">Input 1</button>
<button name="input_2" placeholder="2">Input 2</button>
<button name="input_3" placeholder="3">Input 3</button>

<p class="option some_option_1">
  Option 1
</p>
<p class="option some_option_2">
  Option 2
</p>
<p class="option some_option_3">
  Option 3
</p>

这是一个 JS 小提琴：https://jsfiddle.net/brydom/16f894Lt/