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

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

我认为使用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/

如何在Liquid Template中动态控制控件的可见性

1 个答案: