jQuery merging values from data attributes and filtering content

Question

I have this problem I can’t solve alone, and I need to ask for your help.

Basically I would like to have a two panels, the first one is like a main filter, while the other one is a some kind of modifier.

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

So when I choose “foo A/B or C” the script filter those items, and it’s quite ok.

But when I choose the “modifier” (bar A/B or C) I would like to merge those those attributes together and display modified version, so I could get something like this “foobar AA/AB/AC/BA/BB/BC/CA/CB/CC”.

So basically when I choose “foo A” and then “bar A/B/C” I would like to get “foobar AA/AB/AC”, same for “foo B” -> ”foobar BA/BB/BC” and “foo C” -> “foobar CA/CB/CC” and so on.

I kind of accomplished this, but I always get AA/AB/AC no matter what I chose earlier (foo A/B or C), and it’s killing me.

If you have any idea how it could be solved I would appreciate it if you help me with this.

Here you'll find full fiddle:

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

Thanks in advance.

If the answer solved your question, make sure to mark it as completed, so other people don't end up coming here in anticipation of you still needing help. — AP.
– AP., Commented Aug 1, 2018 at 22:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Solution:

You had a very small mistake in your code :)

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

That's it!

Fiddle:

Here's the Fiddle with the fix: http://jsfiddle.net/c0drbs2u/47/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 1, 2018 at 22:29

AP.

9,0112 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eightythree Over a year ago

Oh my god, that was it!! Thank you so much @AP. :) Have a great day kind sir :)

Collectives™ on Stack Overflow

jQuery merging values from data attributes and filtering content

1 Answer 1

Solution:

Fiddle:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution:

Fiddle:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related