Вход

Просмотр полной версии : Фильтр (10символов)

Anton6677
27.01.2016, 14:16
Здравствуйте.
Есть чекбокы и селект.
Чекбокс "Мячики"
Чекбокс "Автомобили"
<select>
1)Красные
2)Синие
</select>
При активации Чекбокса "Мячики" - автомобили становятся полупрозрачными. И наоборот. Как сделать чтобы при выборе Красных или Синих стиль применялся только к нажатому чекбоксу, а не ко всем?
Спасибо
Anton6677
27.01.2016, 14:21
-----
рони
27.01.2016, 14:28
Anton6677,
лучше макет с html
Anton6677
27.01.2016, 14:51
Anton6677,
лучше макет с html
http://codepen.io/anon/pen/xZjKJG
я не знаю как сделать так, чтобы выбрав в select, к примеру, цифры, а затем нажав на четные, стиль применялся только к уже "активным" в select цифрам.
рони
27.01.2016, 15:42
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>
Anton6677
27.01.2016, 16:07
http://www.dota2.com/heroes/
как реализовать вот это? тут когда выбираешь роль, а за тем тип атаки, то подсвечиваются только те герои, у когорых есть и выбранная роль и соответствующий тип атаки. Я не понимаю как это связать(
рони
27.01.2016, 16:49
Anton6677,
обьединять параметры фильтров, но это раздел работа
Lemme
27.01.2016, 18:20
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);