jQuery 合并数据属性的值并过滤内容

Question

我有这个问题我一个人无法解决，我需要寻求你的帮助。

基本上我想要两个面板，第一个是主过滤器，另一个是某种修饰符。

<section class="primary-panel">
  <p>Primary panel</p>
  <ul class="primary-panel-wrapper">
    <li class="primary-panel-item" data-foo="A">foo A</li>
    <li class="primary-panel-item" data-foo="B">foo B</li>
    <li class="primary-panel-item" data-foo="C">foo C</li>
  </ul>
</section>

<section class="secondary-panel">
  <p>Secondary panel</p>
  <ul class="secondary-panel-wrapper">
    <li class="secondary-panel-item" data-bar="A">bar A</li>
    <li class="secondary-panel-item" data-bar="B">bar B</li>
    <li class="secondary-panel-item" data-bar="C">bar C</li>
  </ul>
</section>

所以当我选择 “foo A/B or C” 时，脚本会过滤那些项目，这很好。

但是当我选择“修饰符”时(bar A/B or C)我想将这些属性合并在一起并显示修改后的版本，这样我就可以得到这样的东西“foobar AA/AB/AC/BA/BB/BC/CA/CB/CC”。

所以基本上当我选择 “foo A” 然后 “bar A/B/C” 我想得到 “foobar AA/AB/AC”, “foo B” -> ”foobar BA/BB/BC” 和 “foo C” -> “foobar CA/CB/CC” 等等。

我有点做到了这一点，但无论我之前选择什么，我总是得到 AA/AB/AC (foo A/B or C)，这让我很难受。

如果您知道如何解决它，请帮助我，我将不胜感激。

在这里你会找到完整的 fiddle:

http://jsfiddle.net/c0drbs2u/33/

提前致谢。

Answer 1

解决方案：

您的代码中有一个非常小的错误:)

var foobar = $(".showcase-overview .item").attr('data-foo') + $e.attr('data-bar')

// Needed to be

const foobar = $(".primary-panel-item.active").attr('data-foo') + $e.attr('data-bar')

就是这样！

Fiddle:

这是 Fiddle 的修复：http://jsfiddle.net/c0drbs2u/47/

jQuery 合并数据属性的值并过滤内容

jQuery merging values from data attributes and filtering content

javascript

jquery

filter

custom-data-attribute

解决方案：

Fiddle: