Фильтр (10символов)
Здравствуйте.
Есть чекбокы и селект. Чекбокс "Мячики" Чекбокс "Автомобили" <select> 1)Красные 2)Синие </select> При активации Чекбокса "Мячики" - автомобили становятся полупрозрачными. И наоборот. Как сделать чтобы при выборе Красных или Синих стиль применялся только к нажатому чекбоксу, а не ко всем? Спасибо |
-----
|
Anton6677,
лучше макет с html |
Цитата:
я не знаю как сделать так, чтобы выбрав в select, к примеру, цифры, а затем нажав на четные, стиль применялся только к уже "активным" в select цифрам. |
Anton6677,
классы и стили добаьте по вкусу
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red{
background-color: #FF0000;
}
table {
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 50px;
}
</style>
</head>
<body>
<form action="http://">
<select>
<option>По умолчанию</option>
<option value="num">Цифры</option>
<option value="letter">Буквы</option>
</select>
<input type="checkbox" id="четные"> Четные
<input type="checkbox" id="нечетные"> Нечетные
<table>
<tr>
<td data-name="буквы" class="black_td">БУКВЫ</td>
<td data-name="буквы" class="black_td">БУКВЫ</td>
<td data-name="цифры" data-type="четные" class="black_td">ЧЕТНЫЕ ЦИФРЫ</td>
<td data-name="буквы" class="black_td">БУКВЫ</td>
</tr>
<tr>
<td data-name="цифры" data-type="Нечетные" class="black_td">НЕЧЕТНЫЕ ЦИФРЫ</td>
<td data-name="цифры" data-type="четные" class="black_td">ЧЕТНЫЕ ЦИФРЫ</td>
<td data-name="буквы" class="black_td">БУКВЫ</td>
<td data-name="цифры" data-type="Нечетные" class="black_td">НЕЧЕТНЫЕ ЦИФРЫ</td>
</tr>
<tr>
<td data-name="цифры" data-type="Нечетные" class="black_td">НЕЧЕТНЫЕ ЦИФРЫ</td>
<td data-name="буквы" class="black_td">БУКВЫ</td>
<td data-name="цифры" data-type="Нечетные" class="black_td">НЕЧЕТНЫЕ ЦИФРЫ</td>
<td data-name="цифры" data-type="четные" class="black_td">ЧЕТНЫЕ ЦИФРЫ</td>
</tr>
</table>
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
var td = document.querySelectorAll('td'),
select = document.querySelector('select'),
checkbox = document.querySelectorAll('[type="checkbox"]'),
form = document.querySelector('form');
form.addEventListener('change', function() {
[].forEach.call(td , function(el) {
var data = el.dataset.name, type = el.dataset.type;
el.classList.remove('red');
if(data == 'буквы' && select.value == 'letter') el.classList.add('red');
if(data == 'цифры' && select.value == 'num') el.classList.add('red');
if(type == 'четные' && checkbox[0].checked) el.classList.add('red');
if(type == 'Нечетные' && checkbox[1].checked) el.classList.add('red');
});
});
});
</script>
</body>
</html>
|
http://www.dota2.com/heroes/
как реализовать вот это? тут когда выбираешь роль, а за тем тип атаки, то подсвечиваются только те герои, у когорых есть и выбранная роль и соответствующий тип атаки. Я не понимаю как это связать( |
Anton6677,
обьединять параметры фильтров, но это раздел работа |
Anton6677, если нужно понять, то:
function sortByAttackType(heroes, attackType) {
return heroes.filter(function(hero) {
return hero.attack_type === attackType;
});
}
function sortByRole(heroes, role) {
return heroes.filter(function(hero) {
return hero.role === role;
});
}
var heroes = [
{ name: 'Anti-Mage', role: 'carry', attack_type: 'melee' },
{ name: 'Wraith King', role: 'carry', attack_type: 'melee' },
{ name: 'Tinker', role: 'carry', attack_type: 'ranged' },
{ name: 'Invoker', role: 'carry', attack_type: 'ranged' },
{ name: 'Ogre Magi', role: 'support', attack_type: 'melee' },
{ name: 'Abaddon', role: 'support', attack_type: 'melee' },
{ name: 'Crystal Maiden', role: 'support', attack_type: 'ranged' },
{ name: 'Disruptor', role: 'support', attack_type: 'ranged' },
];
var carries = sortByRole(heroes, 'carry'),
supports = sortByRole(heroes, 'support'),
melee = sortByAttackType(heroes, 'melee'),
ranged = sortByAttackType(heroes, 'ranged'),
meleeSupports = sortByRole(melee, 'support');
console.log(carries);
console.log(supports);
console.log(melee);
console.log(ranged);
console.log(meleeSupports);
|
| Часовой пояс GMT +3, время: 00:33. |