Wie synchronisiere ich die beiden Filter?

Question

Es gibt 2 Filter, die ich nicht synchronisieren kann. Wie kann ich das machen?

Wie funktionieren sollte, wähle ich das Kontrollkästchen im ersten Filter, es sind Blöcke zugeordnet, wenn Sie den zweiten Filter auswählen in sollte einen Block zugeordnet, aber zur gleichen Zeit, die Einheiten von der hinzugefügt werden Der erste Filter sollte immer noch an seinem Platz bleiben.

Vielleicht durch den Selektor, um es zu ermöglichen? aber woher weiß ich das nicht?

Was sind meine anderen Optionen?

$(document).ready(function() { 
 
    var rubric = $('[data-rubric]'); 
 
    var rubric_items = $('.filter-rubric__item :checkbox'); 
 
    var tour = $('[data-tour]'); 
 
    var tour_items = $('.filter-session__item :checkbox'); 
 

 
    rubric_items.on('change', function() { 
 
    var name = this.id; 
 
    if ($('.filter-rubric__item :checkbox:checked').length == 1) { 
 
     if ($(this).prop('checked')) { 
 
     rubric.hide(); 
 
     $('[data-rubric=' + name + ']').show(); 
 
     } else { 
 
     $('[data-rubric=' + name + ']').hide(); 
 
     } 
 
    } else if ($('.filter-rubric__item :checkbox:checked').length > 1) { 
 
     if ($(this).prop('checked')) { 
 
     $('[data-rubric=' + name + ']').show(); 
 
     } else { 
 
     $('[data-rubric=' + name + ']').hide(); 
 
     } 
 
    } else { 
 
     rubric.show(); 
 
    } 
 
    }); 
 

 
    tour_items.on('change', function() { 
 
    var name = this.id; 
 
    if ($('.filter-session__item :checkbox:checked').length == 1) { 
 
     if ($(this).prop('checked')) { 
 
     tour.hide(); 
 
     $('[data-tour=' + name + ']').show(); 
 
     } else { 
 
     $('[data-tour=' + name + ']').hide(); 
 
     } 
 
    } else if ($('.filter-session__item :checkbox:checked').length > 1) { 
 
     if ($(this).prop('checked')) { 
 
     $('[data-tour=' + name + ']').show(); 
 
     } else { 
 
     $('[data-tour=' + name + ']').hide(); 
 
     } 
 
    } else { 
 
     tour.show(); 
 
    } 
 
    }); 
 

 
    function filter_event() { 
 
    if ($('data-rubric') != name && $('data-tour') != name) { 
 
     rubric.hide(); 
 
    } else { 
 
     rubric.show(); 
 
    }; 
 
    } 
 
});

.filter__list--event { 
 
    border-bottom: 0; 
 
    padding: 25px 0 25px; 
 
    margin: 0; 
 
} 
 
.filter__item { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    cursor: pointer; 
 
} 
 
.filter-session__list { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.filter-rubric__list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 12px; 
 
} 
 
.filter-rubric__label span { 
 
    display: none; 
 
} 
 
.filter-rubric input { 
 
    display: none; 
 
} 
 
input[type="checkbox"], 
 
input[type="radio"] { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
} 
 
.filter-rubric__label { 
 
    color: #979797; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 13px; 
 
    font-weight: 600; 
 
    letter-spacing: 0.3px; 
 
    padding: 9px 0 14px 0; 
 
    position: relative; 
 
} 
 
.filter-rubric__item:first-child .filter-rubric__label { 
 
    padding: 3px 0 14px 0; 
 
} 
 
filter-rubric__label:before { 
 
    background: #fff; 
 
    border: 1px solid #e8e8e8; 
 
    content: ''; 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 9px; 
 
    width: 16px; 
 
} 
 
input[type="checkbox"]:checked + .filter-rubric__label span { 
 
    display: block; 
 
    position: absolute; 
 
    right: 1px; 
 
    top: 10px; 
 
} 
 
.filter-rubric__label span > svg { 
 
    height: 15px; 
 
    width: 16px; 
 
    fill: #ff5711; 
 
} 
 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 
.timeWidth { 
 
    width: 178px; 
 
} 
 
.time-message__event-info--purple { 
 
    background-color: #eee5f4; 
 
} 
 
.time-message__event-info { 
 
    min-height: 101px; 
 
    border-radius: 5px; 
 
    margin-bottom: 3px; 
 
    border: 1px solid #e0e0e0; 
 
} 
 
.timeWidth { 
 
    width: 178px; 
 
} 
 
.timeLeft__360min { 
 
    left: 360px; 
 
} 
 
.timeLeft { 
 
    position: relative; 
 
    left: 0; 
 
} 
 
.time-message__event-info--blue { 
 
    background-color: #a9dcf6; 
 
} 
 
.time-message__event-info { 
 
    min-height: 101px; 
 
    border-radius: 5px; 
 
    margin-bottom: 3px; 
 
    border: 1px solid #e0e0e0; 
 
} 
 
.time-message__event-info--pink { 
 
    background-color: #fed5d5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="filter__list filter__list--event"> 
 
    <li class="dropdown filter__item js-no-close"><span data-toggle="dropdown" class="dropdown-toggle filter__name" aria-expanded="false">Выберите рубрику</span> 
 
    <div class="dropdown-menu filter-rubric"> 
 
     <ul class="filter-rubric__list"> 
 
     <li class="filter-rubric__item"> 
 
      <input type="checkbox" name="1" id="rubric-1"> 
 
      <label for="rubric-1" class="filter-rubric__label">Наука<span><!--?xml version="1.0" encoding="utf-8"?--> 
 
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> 
 
<style type="text/css"> 
 
</style> 
 
<path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z 
 
\t "></path> 
 
</svg> 
 
</span> 
 
      </label> 
 
     </li> 
 
     <li class="filter-rubric__item"> 
 
      <input type="checkbox" name="2" id="rubric-2"> 
 
      <label for="rubric-2" class="filter-rubric__label">Спорт<span><!--?xml version="1.0" encoding="utf-8"?--> 
 
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> 
 
<style type="text/css"> 
 
</style> 
 
<path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z 
 
\t "></path> 
 
</svg> 
 
</span> 
 
      </label> 
 
     </li> 
 
     <li class="filter-rubric__item"> 
 
      <input type="checkbox" name="3" id="rubric-3"> 
 
      <label for="rubric-3" class="filter-rubric__label">Искусство<span><!--?xml version="1.0" encoding="utf-8"?--> 
 
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> 
 
<style type="text/css"> 
 
</style> 
 
<path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z 
 
\t "></path> 
 
</svg> 
 
</span> 
 
      </label> 
 
     </li> 
 
     <li class="filter-rubric__item"> 
 
      <input type="checkbox" name="4" id="rubric-4"> 
 
      <label for="rubric-4" class="filter-rubric__label">Общие события<span><!--?xml version="1.0" encoding="utf-8"?--> 
 
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> 
 
<style type="text/css"> 
 
</style> 
 
<path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z 
 
\t "></path> 
 
</svg> 
 
</span> 
 
      </label> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown filter__item js-no-close"><span data-toggle="dropdown" class="dropdown-toggle filter__name" aria-expanded="false">Выбрать смену</span> 
 
    <div class="dropdown-menu filter-session js-vertical-scroll my_dropdown vertical-dropdown"> 
 
     <ul class="filter-session__list"> 
 
     <div class="jspContainer"> 
 
      <div class="jspPane"> 
 
      <li class="filter-session__item"> 
 
       <input type="checkbox" name="1" id="session-1"> 
 
       <label for="session-1" class="filter-session__label">Мартовская смена</label> 
 
      </li> 
 
      <li class="filter-session__item"> 
 
       <input type="checkbox" name="2" id="session-2"> 
 
       <label for="session-2" class="filter-session__label">Апрельская смена</label> 
 
      </li> 
 
      <li class="filter-session__item"> 
 
       <input type="checkbox" name="3" id="session-3"> 
 
       <label for="session-3" class="filter-session__label">Углубленное изучение математики</label> 
 
      </li> 
 
      <li class="filter-session__item"> 
 
       <input type="checkbox" name="4" id="session-4"> 
 
       <label for="session-4" class="filter-session__label">Смена региональных Летних математических школ</label> 
 
      </li> 
 
      </div> 
 
     </div> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<div class="time-message__event"> 
 
    <div data-rubric="rubric-1" data-tour="session-1" class="time-message__event-info time-message__event-info--purple timeWidth"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">07.00 - 08.00</p> 
 
     <p class="time-message__name">Подъём и зарядка</p> 
 
    </div> 
 
    </div> 
 
    <div data-rubric="rubric-1" data-tour="session-1" class="time-message__event-info time-message__event-info--purple timeLeft timeLeft__30min timeWidth timeWidth__90min"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">07.30 - 09.00</p> 
 
     <p class="time-message__name">Завтрак для детей</p> 
 
     <p class="time-message__description">(Столовая №1)</p> 
 
    </div> 
 
    </div> 
 
    <div data-rubric="rubric-1" data-tour="session-1" class="time-message__event-info time-message__event-info--purple timeLeft timeLeft__60min timeWidth timeWidth__120min"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">08.00 - 10.00</p> 
 
     <p class="time-message__name">Завтрак для детей</p> 
 
     <p class="time-message__description">(Столовая №1)</p> 
 
    </div> 
 
    </div> 
 
    <div data-rubric="rubric-2" data-tour="session-2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">09.00 - 10.00</p> 
 
     <p class="time-message__name">Математика и геометрия</p> 
 
     <p class="time-message__description">Смена "Смена кубок", группа А.</p> 
 
     <p class="time-message__location">(ауд.Менделеева)</p> 
 
    </div> 
 
    </div> 
 
    <div data-rubric="rubric-2" data-tour="session-2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">09.00 - 10.00</p> 
 
     <p class="time-message__name">Математика и геометрия</p> 
 
     <p class="time-message__description">Смена "Смена кубок", группа Б.</p> 
 
     <p class="time-message__location">(ауд.Менделеева)</p> 
 
    </div> 
 
    </div> 
 
    <div data-rubric="rubric-3" data-tour="session-3" class="time-message__event-info time-message__event-info--pink timeLeft timeLeft__360min timeWidth timeWidth__180min"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">09.00 - 12.00</p> 
 
     <p class="time-message__name">Мастер-класс Павла Бурре</p> 
 
     <p class="time-message__description">Смена "Спортивной надежды сборной",</p> 
 
     <p class="time-message__location">(стадион "Шайба")</p> 
 
    </div> 
 
    <div class="js-close-subevent time-message__event-in" style="display: none;"> 
 
     <div class="time-message__event-info time-message__event-info--darkpink timeWidth timeWidth__30min"> 
 
     <div class="time-message__info"> 
 
      <p class="time-message__duration time-message__duration--sub">09.00 - 09.30</p> 
 
      <p class="time-message__name time-message__name--sub">Сбор - выход</p> 
 
     </div> 
 
     </div> 
 
     <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__30min-sub timeWidth timeWidth__90min"> 
 
     <div class="time-message__info"> 
 
      <p class="time-message__duration time-message__duration--sub">10.00 -11.30</p> 
 
      <p class="time-message__name time-message__name--sub">Мастер класс на льду</p> 
 
     </div> 
 
     </div> 
 
     <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__15min timeWidth timeWidth__15min"> 
 
     <div class="time-message__info"> 
 
      <p class="time-message__duration time-message__duration--sub">11.45 - 12.00</p> 
 
      <p class="time-message__name time-message__name--sub">Возвра-щение</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="js-open time-message__open-close">Развернуть подсобытия</div> 
 
    </div> 
 
    <div data-rubric="rubric-2" data-tour="session-1" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__420min timeWidth"> 
 
    <div class="time-message__info"> 
 
     <p class="time-message__duration">10.00 - 11.00</p> 
 
     <p class="time-message__name">Математические бои</p> 
 
     <p class="time-message__description">Смена "Смена кубок", группа А.</p> 
 
     <p class="time-message__location">(Лобби)</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Hier ist der Arbeitscode, kann jemand kommen in praktisch

$(document).ready(function() { 
 
    $("input[type='checkbox']").click(function() { 
 
    if (!$("input[type='checkbox']").is(":checked")) { 
 
     $('.time-message__event-info').show(); 
 
    } else { 
 
     $('.time-message__event-info').hide(); 
 
     $("input[type='checkbox']").each(function() { 
 
     if ($(this).is(':checked')) { 
 
      var filter = $(this).attr('filter'); 
 
      var data = $(this).attr('data'); 
 
      $.each($('.time-message__event-info'), function() { 
 
      var p = $(this); 
 
      var fs = $(this).attr(filter).split(","); 
 
      $.each(fs, function(index, value) { 
 
       if (data == value) { 
 
       p.show(); 
 
       } 
 
      }); 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});