Форум

Anton6677 · #1 (**permalink**) 27.01.2016, 14:16

Здравствуйте.
Есть чекбокы и селект.

Чекбокс "Мячики"
Чекбокс "Автомобили"
<select>
 1)Красные
 2)Синие
</select>

При активации Чекбокса "Мячики" - автомобили становятся полупрозрачными. И наоборот. Как сделать чтобы при выборе Красных или Синих стиль применялся только к нажатому чекбоксу, а не ко всем?
Спасибо

Anton6677 · #2 (**permalink**) 27.01.2016, 14:21

-----

рони · #3 (**permalink**) 27.01.2016, 14:28

Anton6677,
лучше макет с html

Anton6677 · #4 (**permalink**) 27.01.2016, 14:51

Сообщение от рони

Anton6677,
лучше макет с html

http://codepen.io/anon/pen/xZjKJG
я не знаю как сделать так, чтобы выбрав в select, к примеру, цифры, а затем нажав на четные, стиль применялся только к уже "активным" в select цифрам.

рони · #5 (**permalink**) 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 · #6 (**permalink**) 27.01.2016, 16:07

http://www.dota2.com/heroes/
как реализовать вот это? тут когда выбираешь роль, а за тем тип атаки, то подсвечиваются только те герои, у когорых есть и выбранная роль и соответствующий тип атаки. Я не понимаю как это связать(

рони · #7 (**permalink**) 27.01.2016, 16:49

Anton6677,
обьединять параметры фильтров, но это раздел работа

Lemme · #8 (**permalink**) 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);

Форум

Справочник

Discord чат

Курсы javascript