2つのフィルタを同期させる方法は？

Question

私は同期できない2つのフィルタがあります。どうやってやるの？

どのように動作する必要があります、私は、それに関連付けられているブロックが関連付けられているブロックを追加する必要があります2番目のフィルタを選択すると、最初のフィルタでチェックボックスを選択すると同時に、最初のフィルタはまだその場所に留まるべきです。

おそらくセレクタを介して可能にするには？どのように私は知らないのですか？

私の他のオプションは何ですか？ここで

$(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

誰かが便利

$(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(); 
 
       } 
 
      }); 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

に来ることができ、作業コードです