如何同步两个筛选器
How to synchronize the two filters?
有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
"></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
"></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
"></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
"></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>这是工作代码，有人可以派上用场吗
$(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();
}
});
});
}
});
}
});
});相关文章：
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 如何同步两个筛选器
- Jquery按两个值进行筛选
- SAPUI5:如何在两个视图之间筛选列表
- 按两个不同类别筛选
- 使用两个选择控件编辑表单，以便在首次启动时进行筛选
- 在两个差异列上筛选网格存储
- 基于两个条件进行筛选
- 筛选和比较两个项目的列表
- 根据两个其他值之间的属性值筛选元素
- AngularJS:如何对选项值中的两个元素进行排序或筛选
- 筛选两个对象数组
- 用于两个不同路由的公用筛选器
