Форумы портала PHP.SU :: Версия для печати

1. twodogs - 13 Мая, 2023 - 21:15:02 - перейти к сообщению

Есть два кода, которые должны делать одно и тоже - отбирать нужные блоки. Первый код фильтрует с помощью кнопок, второй выпадающим списком.

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"; } } }; });
 