Есть два кода, которые должны делать одно и тоже - отбирать нужные блоки. Первый код фильтрует с помощью кнопок, второй выпадающим списком.
CODE ( html):
скопировать код в буфер обмена
<div style="margin:10px 5px 20px 0;"> <!-- Кнопки отдельно --> <a href="javascript:;" class="filterA activeA" data-filter="all">View all</a> <a href="javascript:;" class="filterA" data-filter="o">black</a> <a href="javascript:;" class="filterA" data-filter="a">white</a> <a href="javascript:;" class="filterA" data-filter="p">green</a> </div> <div class='Luxexe'> <!-- Выпадающий список --> <select id='Jueyci'> <option value='ci'>View all</option> <option value="o">black</option> <option value="a">white</option> </select> </div> <div class='container' id='Rupymi'> <div class=" a1 ci filter-item o show"> <a data-fancybox='aq' href="http://ipic.su/7z1pOc"><img src='http://ipic.su/7z1pOc'> </a></div> <div class=" a1 ci filter-item p show"> <a data-fancybox='aq' href="http://ipic.su/7z1qJw"><img src='http://ipic.su/7z1qJw'> </a></div> <div class=" a1 ci filter-item a show"> <a data-fancybox='aq' href="http://ipic.su/7z1qJw"><img src='http://ipic.su/7z1qJw'> </a></div> </div>
CODE ( javascript):
скопировать код в буфер обмена
$(document).ready(function() { $(".a1").children('a').fancybox({ loop: false }); $('.filterA').click(function() { if( $(this).hasClass('activeA') ) { console.log('already activeA'); } else { console.log('new activeA'); $('.filterA').removeClass('activeA'); $(this).addClass('activeA');<a> Tag bekommt die Klasse "selected" hinzugefьgt var $dataFilter = $(this).data('filter'); if( $dataFilter == 'all') { console.log('add show to all'); $('.filter-item:not(.show)').fadeIn(500); $('.filter-item').addClass('show'); $('.a1').children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter); } else { console.log('delete show ' + $dataFilter); $('.filter-item:not(.' + $dataFilter + ')').fadeOut(0); $('.filter-item:not(.' + $dataFilter + ')').removeClass('show'); $('.filter-item.' + $dataFilter).fadeIn(500); $('.filter-item.' + $dataFilter).addClass('show'); $('.a1.' + $dataFilter).children('a').attr('data-fancybox', $dataFilter).data("fancybox", $dataFilter); } }; }); }); $(document).ready(function () { var filter_select_el = document.getElementById("Jueyci"); var items_el = document.getElementById("Rupymi"); filter_select_el.onchange = function () { console.log(this.value); var items = items_el.getElementsByClassName("ci"); for (var i = 0; i < items.length; i++) { if (items[i].classList.contains(this.value)) { items[i].style.display = "block"; } else { items[i].style.display = "none"; } } }; });
|