В этом календаре есть фильтры для типа события (с помощью флажков) и региона (ссылки с горячими изображениями). Я могу заставить любой набор фильтров работать независимо, но как, черт возьми, заставить их работать вместе? Было бы лучше использовать радиокнопки вместо изображений, или есть какой-то способ «запомнить», какое изображение было выбрано в последний раз?
Этот код jQuery работал для выбора регионов. Я использовал нечто подобное для выбора типов событий. Я просто не могу собрать их в один jQuery, который работает вместе, чтобы показать выбранные типы событий в выбранном регионе!
jПросмотр выбора одного региона
$(document).ready(function() {
// showall the events
$("#calendar p").show();
$("td.filters a").click(function(evt) {
evt.preventDefault();
var regionid = $(this).attr('id');
$("#calendar p").hide(); //hide all
$("." + regionid).show(); //show only selected region
});
;
Пользователь может выбрать несколько флажков, но только один регион (красный, синий, все), поэтому мы смотрим на этот регион И (этот тип ИЛИ этот тип). Если пользователь меняет регион, должны отображаться только выбранные типы событий. Если пользователь изменяет выбранные типы событий, ранее выбранный регион все равно должен отображаться. JQuery ниже не работает.
С этой частью jQuery:
selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", ";
// builds a selector like "red.type1, red.type2, blue.type3, "
Я пытаюсь создать селектор, который заканчивается (красный AND type1) для первого абзаца, (красный AND type2) для второго и (синий AND type3) для третьего. Я не уверен, как это сделать!
HTML
<div class="filters">
<input type="checkbox" name="check_events" id="typeAny" />
<input type="checkbox" name="check_events" id="type1" />
<input type="checkbox" name="check_events" id="type2" />
<input type="checkbox" name="check_events" id="type3" />
<ul>
<li><a href="javascript:void(0)" id="all">All</a></li>
<li><a href="javascript:void(0)" id="red">Red</a></li>
<li><a href="javascript:void(0)" id="blue">Blue</a></li>
</ul>
</div>
<table id="calendar">
<tr>
<td><p class="all red typeAny type1">Type 1 event in red region</p></td>
<td><<p class="all red typeAny type2">Type 2 event in red region</p></td>
<td><<p class="all blue typeAny type3">Type 3 event in blue region</p></td>
</tr>
</table>
CSS
.all a, #all a{display:block; background:gray;color:black; }
.red a, #red a{display:block; background:red;color:black; }
.blue a, #blue a{display:block; background:blue;color:black; }
JQuery
$(document).ready(function() {
var $checkboxes = $("input[id^='check_']");
$("#calendar p").show();
$("td.filters a").click(function(evt) {
evt.preventDefault();
var regionid = $(this).attr("id");
var selector = "";
$checkboxes.filter(':checked').each(function(){ // checked
selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", ";
// builds a selector like "red.type1, red.type2, blue.type3, "
});
selector = selector.substring(0, selector.length - 2); // remove trailing ', '
$("#calendar p").hide() // hide all events
.filter(selector).show(); // reduce set to matched and show
}).change();
});