Javascript-форум - Упрощение скрипта отображения div

Цитата:

Сообщение от рони (Сообщение 455353)

PonyS,
не нужно копировать целииком ответ!
для любых name="f..."

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .hot {
 display: none;
 }
 .hot.open {
   display: block;
 }

  </style>
  <script>
window.addEventListener("DOMContentLoaded", function() {
    var a = document.querySelectorAll(".hot"),
        d = a.length,
        b = document.querySelectorAll("[name^='f']"),
        e = a[0];
    [].forEach.call(b, function(f, g) {
        var c = g % d;
        f.addEventListener("click", function() {
            e.classList.remove("open");
            a[c].classList.add("open");
            e = a[c];
            [].forEach.call(b, function(a, b) {
                a.checked = b % d == c
            })
        })
    })
});
  </script>
</head>

<body>
<style type="text/css">
    .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }

  </style>
  <input name="f" type="radio" >
  <input name="f" type="radio" >
  <input name="f" type="radio" >
  <input name="fa" type="radio" >
  <input name="fa" type="radio" >
  <input name="fa" type="radio" >
 <div class="hot open" >0</div>
 <div class="hot" >1</div>
 <div class="hot" >2</div>
</body>
</html>

Спасибо больше, то что нужно! Остался вопрос с .open для первого div...подскажите пожалуйста, как можно определить на странице первый div hot и выставить ему open class? т.к. у меня порядок меняется div и radio, и если я выставлю всем open, то при первом заходе на страницу будет дубль всех div, а нужно только 1... Появилась идея jquery - найти на странице первый div с class hot из всех что есть, и добавить ему class - open, сработает так или нужно другое что-то думать?