Question

我使用filterify（http://luis-almeida.github.io/filtrify/）插件来过滤一些div。现在我要做的是从a元素获取数据属性，并将其与目标div元素匹配。

当我手动输入值时，它可以正常工作，例如，ft.trigger({ type : ["red"] }，但是当我试图使其动态化并将其与失败的变量混合时。

我的脚本看起来像这样：

$(function(){ 


    var ft = $.filtrify("boxes");


    $("#filter_nav a").click(function(e) {

        e.preventDefault();

        // coding the values manually works
        // ft.trigger({ type : ["red"] }


        var customData = $(this).data()

        for (var key in customData) {

            ft.trigger({ key : [customData[key]] });
            // should return something like ft.trigger({ type : ["red"] });

        }

    });


});

HTML

<ul id="filter_nav">
    <li><a href="#" data-type='red' >Red</a></li>
    <li><a href="#" data-type='yellow' >Yellow</a></li>
    <li><a href="#" data-type='blue' >Blue</a></li>
    <li><a href="#" data-type='green' >Green</a></li>

    <li><a href="#" data-progress='20' >20</a></li>
    <li><a href="#" data-progress='40' >40</a></li>
    <li><a href="#" data-progress='60' >60</a></li>
    <li><a href="#" data-progress='80' >80</a></li>

</ul>

<div id="boxes">

    <div data-type='red' data-progress='20' class="box red"></div>
    <div data-type='yellow' data-progress='40' class="box yellow"></div>
    <div data-type='blue' data-progress='60' class="box blue"></div>
    <div data-type='red' data-progress='20' class="box red"></div>
    <div data-type='green' data-progress='80' class="box green"></div>
    <div data-type='yellow' data-progress='40' class="box yellow"></div>
    <div data-type='blue' data-progress='60' class="box blue"></div>
    <div data-type='red' data-progress='20' class="box red"></div>


</div>

我怀疑我的设置是错误的

ft.trigger({ key : [customData[key]] });

更多关于触发方法： http://luis-almeida.github.io/filtrify/trigger.html

你能帮助我吗？

谢谢！

Answer 1

触发器方法的参数是json，如下所示（你提到手动工作的那个）：

{ type : ["red"] }

您想从数据属性创建该json。 json将具有名为type的属性，属性的名称来自数据属性名称，值["red"]将是一个数组，其中包含来自数据属性值的单个元素。

您获得的值正确，但json的属性名称始终为key而不是type或progress。您可以通过以下方式将参数传递给触发器：

for (var key in customData) {
    var triggerOptions = {};
    triggerOptions[key] = [customData[key]];            
    ft.trigger(triggerOptions);        
}

基本上，您必须先创建对象，然后使用square bracket notation

在对象中创建新属性

Answer 2

嗯，你说你期待类似......

should return something like ft.trigger({ type : ["red"] });

但您的代码返回

ft.trigger({ key : ["red"] })

也许你的密钥名称错误

获取对象中的键和值，并将其用作参数

2 个答案: