0

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.

John O'Connor
  • 5,244
  • 2
  • 24
  • 29
user3634423
  • 3
  • 1
  • Once you retrieve the data-position attribute, you could use a string split function on spaces then loop through the individual numbers... just a thought –  May 13 '14 at 23:00

1 Answers1

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

adeneo
  • 312,895
  • 29
  • 395
  • 388