是否可以为一个元素设置多个数据选项键

Question

所以我正在尝试使用jquery同位素。

我有一个要过滤的数据选项键；

<ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#filter" data-option-value=".filterA" class="selected">A</a></li>
    <li><a href="#filter" data-option-value=".filterB">B</a></li>
</ul>

并且我有一个数据选项-键来改变布局；

<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
    <li><a href="#layout" data-option-value="layoutC" class="selected">C</a></li>
    <li><a href="#layout" data-option-value="layoutD">D</a></li>
</ul>

有没有一种方法可以组合这些链接，这样一个链接就有两个不同的数据选项键，里面有不同类型的数据选项值。(我使用的标准脚本可以在isotope website上找到)

看起来不太可能，但值得一试！

谢谢

Answer 1

您可以将JSON设置为data-option-value，因此可以有多个值。

<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
    <li><a href="#layout" data-option-value='["one", "two"]'>C</a></li>
    <li><a href="#layout" data-option-value="layoutD">D</a></li>
</ul>​


data = $('#layouts').find('a:first').attr('data-option-value')
console.log($.parseJSON(data)[0]);​

请参阅此处的示例：http://jsfiddle.net/464hh/