我已经编写了一些代码来过滤集合内部。但是当输入点击时它不会触发(用 选中console.log
)
这是我的代码:
{% for collection in collections %}
$('#collection-{{ collection.title | replace: " ", "" }}').on('click', function(event){
showCollection('{{ collection.title | replace: " ", "" }}');
});
{% endfor %}
这是HTML:
{% for collection in collections %}
<li>
<input type="radio" name="categoryCollection" id="collection-{{ collection.title | replace: " ", "" }}" value="{{ collection.title }}">
<label for="collection-{{ collection.title | replace: " ", "" }}">{{ collection.title }}</label>
</li>
{% endfor %}
我错过了什么?谢谢!
编辑:我使用的逻辑是流动的,因为我正在创建 Shopify 主题。此外,在控制台中一切正常。我将在此处添加呈现的 HTML:
<ul>
<li>
<input type="radio" name="categoryCollection" id="collection-Jackets" value="Jackets">
<label for="collection-Jackets">Jackets</label>
</li>
<li>
<input type="radio" name="categoryCollection" id="collection-LuxuryTracksuits" value="Luxury Tracksuits">
<label for="collection-LuxuryTracksuits">Luxury Tracksuits</label>
</li>
<li>
<input type="radio" name="categoryCollection" id="collection-Masks" value="Masks">
<label for="collection-Masks">Masks</label>
</li>
<li>
<input type="radio" name="categoryCollection" id="collection-T-Shirts" value="T-Shirts">
<label for="collection-T-Shirts">T-Shirts</label>
</li>
<li>
<input type="radio" name="categoryCollection" id="collection-Trousers" value="Trousers">
<label for="collection-Trousers">Trousers</label>
</li>
</ul>
EDIT2:我创建了一个工作小提琴,它只有一个问题:它有效。在这里你可以看到