基于条件 JQuery 的流动脚本

Question

假设我们有一个下拉开关：

<label for="num-of-records">Rows per Page: </label>
<select name="num-of-records" id="num-of-records">
  <option value="" selected>default</option>
  <option value="25">25</option>
  <option value="50">50</option>
</select>

我们还有一个liquid代码：

{% include 'page' key: 'table' %}

对于 key，我为每个下拉选项值提供了一些选项 table、table25 和 table50。

我是 liquid 的新手，但我想创建一个 jquery，其中 select 基于下拉列表的 key 值。

<script>
$(this).append("{% include 'page' key: 'table"+ $.("#num-of-records").val()+"' %}"
</script>

所以假设我选择选项 25，那么它将（可能重新打开页面）附加 liquid 脚本：

{% include 'page' key: 'table25' %}

Answer 1

Liquid 是一种服务器端渲染语言。 jQuery 在 Liquid 之后呈现，因此您无法继续此操作。

一种可行的方法（不是简单的方法）可能是渲染所有 Liquid 外壳，隐藏它们，然后使用 jQuery.

显示您想要的那个

基于条件 JQuery 的流动脚本

Liquid Script based on Conditional JQuery

javascript

html

jquery

liquid