我有多个列表项,我想在单击它们时打开活动类。
<ul class="list-body">
<li v-on="click: setFilter('style', 'pils')" v-class="active: isActive">Pils</li>
<li>Dubbel</li>
<li>Tripel</li>
<li v-on="click: setFilter('style', 'Quadrupel')">Quadrupel</li>
<li>Wit</li>
</ul>
我已经有一个setFilter
单击功能,我可以在其中添加额外的功能来激活课程onClick
.
setFilter: function(facet, value) {
// Facet for style of beer(search filter)
this.helper.addDisjunctiveFacetRefinement(facet, value).search();
},
我的问题是如何选择具体的li
被单击并调用 with 的元素setFilter
method?
我想为活动类设置一个变量false
or true
对于每个单li
已被单击(或未单击)的元素。
您可以直接在函数中传递事件和事件目标。
目标是您单击的元素。
HTML:
<ul id="demo">
<li v-on="click: onClick">Trigger a handler</li>
<li v-on="click: n++">Trigger an expression</li>
</ul>
JS:
var vue = new Vue({
el: '#demo',
data: {},
methods: {
onClick: function (e) {
var clickedElement = e.target;
}
}
})
有了你的元素,你就可以做你想做的事。
例如,如果您使用 jQuery:
$(clickedElement).siblings().removeClass('active');
$(clickedElement).addClass('active');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)