Это старый вопрос, но ... Я сделаю снимок. Рабочий jsfiddle: http://jsfiddle.net/a0nnrfua/
Я думаю, что многое зависит от того, как вы собираетесь определять «ближайший», но предполагая решение jQuery, и, надеюсь, ваши требования к браузеру не слишком много в прошлом, вы можете использовать атрибуты данных и jQuery, чтобы придумать некоторые относительно простые функции. Или даже используйте значения частей флажков на самом деле.
Psuedocode, это будет выглядеть так:
- Определить щелчок или изменить обработчик для обнаружения, когда флажок была затронута/изменена.
- Определите функцию, которая будет проверять все отмеченные элементы и передавать значения в функцию «ближайшего пакета».
- Основываясь на результатах этой функции, отфильтруйте выбор вашего пакета, чтобы ваши выборы были выделены или отмечены каким-либо образом.
Так давайте предположим, следующий HTML-код:
<h3>TV Channels</h3>
<div id="TVChannelSelections">
<input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_Discovery" value="Discovery" />
<label for="tvchannel_Discovery">Discovery Channel</label>
<br/>
<input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_AnimalPlanet" value="Animal Planet" />
<label for="tvchannel_AnimalPlanet">Animal Planet</label>
<br/>
<input type="checkbox" class="tvchannel" name="tvchannel" id="tvchannel_DisneyChannel" value="Disney Channel" />
<label for="tvchannel_Disney">Disney Channel</label>
<br/>
</div>
<div id="message"></div>
<h3>Packages</h3>
<div id="FilteredPackages">
<div class="package deselected" id="Package1" data-channels="Discovery,Disney Channel">Package #1</div>
<div class="package deselected" id="Package2" data-channels="Animal Planet,Disney Channel">Package #2</div>
<div class="package deselected" id="Package3" data-channels="Animal Planet">Package #3</div>
</div>
Так в JQuery, ваше родовое изменение или нажмите обработчик будет определен в коде: Обратите внимание, что я говорю, любой элемент на странице, что имеет определенный класс «tvchannel», если происходит какое-либо изменение, запустите мою функцию фильтра.
<script type="text/javascript" src="../path/to/jQuery/library"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tvchannel").on("change", function() {
FilterMySelectedChannels();
});
});
</script>
Теперь мы можем определить вашу функцию фильтра. Мы собираемся предположить две вещи. # 1, мы хотим найти все выбранные флажки и их значения.Затем мы будем проходить через свойство data-channels всех наших пакетов (определенных как элементы с class = "package"). Мы будем использовать некоторую форму сравнения строк и логическую логику, чтобы определить, что такое полное совпадение против близкого, но без сигарного матча и полного сбоя.
Чтобы отслеживать вещи, я использую 3 класса, выбранные, отмененные и закрытые.
В css вы можете решить, хотите ли вы, чтобы не было выбрано означать «скрыть пакет полностью» (т.е. display: none;), или, может быть, вы хотите, чтобы он был видимым, но серым и «вычеркнутым» (т.е. : strikethrough; color: gray;}
Я собираюсь использовать способ грубой силы для сравнения. В javascript есть лучшие функции массива и функции сравнения, но это должно быть относительно ясно для большинства людей и Я доверяю хорошие люди на StackOverflow отбивать в лучшие решения. Но это должно вам начать. :)
<script type="text/javascript">
function FilterMySelectedChannels() {
$checkedboxes = $(".tvchannel:checked");
$packages = $(".package");
var bAnyFound = false;
$packages.each(function() {
var bCloseButNoCigar = false;
var bCompleteMatch = true;
var packagearray = $(this).data("channels").split(",");
var $currentPackage = $(this);
$checkedboxes.each(function() {
if ($.inArray($(this).val(), packagearray) != -1) {
bCloseButNoCigar = true;
} else {
bCompleteMatch = false;
}
});
if (bCompleteMatch) {
$currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("selected");
bAnyFound = true;
} else if (bCloseButNoCigar) {
$currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("close");
} else {
$currentPackage.removeClass("selected").removeClass("deselected").removeClass("close").addClass("deselected");
}
});
if (bAnyFound) {
$("#message").html("The following matches were found");
} else {
$("#message").html("No actual matches were found, but here are some close matches based on your selections");
$(".package.close").removeClass("deselected").removeClass("close").removeClass("selected").addClass("selected");
}
}
</script>
<style type="text/css">
.selected {
color: red;
background-color: yellow !important;
}
.deselected {
color: grey;
text-decoration: strike-through !important;
background-color: white !important;
}
</style>
Существует очевидная оптимизация, которая, вероятно, может работать здесь, но это начало для тех, кто пытается что-то сделать. Обратите внимание, что предполагается, что ваша разметка динамически генерируется или правильно кодируется. Если вам нужно защититься от опечаток, преобразование текста с помощью .toLowerCase/UpperCase и использование функций .Trim для устранения лишнего пространства поможет. Но вы все равно должны выбирать свои данные с умом, чтобы не было перекрытия. И если вы выберете их достаточно хорошо, вы можете использовать более совершенные методы, такие как регулярные выражения и подстановочный поиск, чтобы сделать код немного короче.
Надеюсь, это поможет кому-то!
Какой язык/какая библиотека/что? – Kroltan