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” 等等。

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

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

在这里你会找到完整的小提琴：

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')

就是这样！

小提琴：

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