match multiple attribute data-value against single attribute data-value

Question

How can I use an element with multiple attribute values to select divs with single matching attribute values and either show or hide those matching divs. I've got the opposite working here (single attritbute matching div with multiple attributes): http://jsfiddle.net/jtspetersen/cEgvB/2/

Essentially, I have 'X' Positions and "Y" lessons. I want to assign a unique attribute-value to each lesson, and when I click the link of Position X with multiple attribute-values, I want the lessons matching the multiple attribute selector to show.

<a class="pos" href="#" data-position="1 2 4">Your Position 1</a>
<a class="pos" href="#" data-position="3 4">Your Position 2</a>
<br />

<div id="title"><em>Lessons</em></div>
<div id="lesson1" class="lesson" data-lesson="1">Lesson 1</div>
<div id="lesson2" class="lesson" data-lesson="2">Lesson 2</div>
<div id="lesson3" class="lesson" data-lesson="3">Lesson 3</div>
<div id="lesson4" class="lesson" data-lesson="4">Lesson 4</div>

So when I click Position 1, Is see lessons 2, 3, 4.

Sorry if this has been answered, but I wasn't able to find anything that cleanly does this.

Answer 1

You'd have to split the position list and check each lesson

$('.pos').on('click', function() {
    var arr = $(this).data('position').split(/\s+/);

    $('.lesson').hide().filter(function() {
        return $.inArray( $(this).data('lesson').toString(), arr ) != -1;
    }).show();
});

FIDDLE