Как показать элементы с помощью jQuery на основе атрибутов данных

Question

Мне нужно показать определенные элементы в списке на основе соответствующих значений атрибутов данных.

Например:

<ul> 

    <li data-album-id-trigger="1" class="album-trigger">Show/Hide album</li> 
    <ul data-album-id="1" class="album-list" style="display:none"> 
     <li>Track 1</li> 
     <li>Track 2</li> 
     <li>Track 3</li> 
    </ul> 

    <li data-album-id-trigger="2" class="album-trigger">Show/Hide album</li> 
    <ul data-album-id="2" class="album-list" style="display:none"> 
     <li>Track 1</li> 
     <li>Track 2</li> 
     <li>Track 3</li> 
    </ul> 

</ul> 

Так в основном, при нажатии на .album-trigger элемент с data-album-id-trigger значением 1, в .album-list с data-album-id значением 1 будет отображаться с помощью метода JQuery .show().

Любая помощь будет отличной.

Answer 1

Попробуйте

//click handler for album-trigger 
 
$('.album-trigger').click(function() { 
 
    //get the value of data-album-id-trigger 
 
    var tid = $(this).data('album-id-trigger'); 
 
    //hide all album-list then show only the one's with data-album-id same as the clicked value 
 
    var $current = $('.album-list[data-album-id="' + tid + '"]').toggle(); 
 
    $('.album-list').not($current).hide() 
 

 
    //if you don't want to hide the previous items 
 
    //$('.album-list[data-album-id="' + tid + '"]').toggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 

 
    <li data-album-id-trigger="1" class="album-trigger">Show/Hide album</li> 
 
    <li data-album-id="1" class="album-list" style="display:none"> 
 
    <ul> 
 
     <li>Track 1</li> 
 
     <li>Track 2</li> 
 
     <li>Track 3</li> 
 
    </ul> 
 
    </li> 
 

 
    <li data-album-id-trigger="2" class="album-trigger">Show/Hide album</li> 
 
    <li data-album-id="2" class="album-list" style="display:none"> 
 
    <ul> 
 
     <li>Track 1</li> 
 
     <li>Track 2</li> 
 
     <li>Track 3</li> 
 
    </ul> 
 
    </li> 
 

 
</ul>