Javascript-форум - Как обойти присвоение одинаковых id двум блокам?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как обойти присвоение одинаковых id двум блокам? (https://javascript.ru/forum/jquery/75071-kak-obojjti-prisvoenie-odinakovykh-id-dvum-blokam.html)

Цитата:

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

перескакивают через 2-3 значения,

строка 42 и 45

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
      counter-reset: num 2000;
      display: flex;
      width: 500px;
  }

  [name="line"]{
      display: none;
  }

  label:before{
      counter-increment: num ;
      content:  counter(num);
      display: block;
      width: 100px;
      height: 4px;
      background-color: rgba(255, 0, 255, 1);
       line-height: 30px;
  }
  [name="line"]:checked ~ label:before{
     background-color: rgba(240, 248, 255, 1);
  }
   label:nth-of-type(5):before{
       width: 0px;
  }
  [name="line"]:checked + label:after{
      margin-top: -6px;
      content:'';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 0, 255, 1);
  }
   label:nth-of-type(2):before{
       counter-increment: num 5 ;
  }
  label:nth-of-type(5):before{
       counter-increment: num 2 ;
  }
</style>

</head>

<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1"></label>
<input name="line" type="radio" id="line2" ><label for="line2"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3"></label>
<input name="line" type="radio" id="line4" ><label for="line4"></label>
<input name="line" type="radio" id="line5" ><label for="line5"></label>

</div>

</body>
</html>

Цитата:

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

можно как-то при таком способе прописать вручную года?

атрибут data-year
css строка 18

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
      display: flex;
      width: 500px;
  }

  [name="line"]{
      display: none;
  }

  label:before{
      content:  attr(data-year);
      display: block;
      width: 100px;
      height: 4px;
      background-color: rgba(255, 0, 255, 1);
       line-height: 30px;
  }
  [name="line"]:checked ~ label:before{
     background-color: rgba(240, 248, 255, 1);
  }
   label:nth-of-type(5):before{
       width: 0px;
  }
  [name="line"]:checked + label:after{
      margin-top: -6px;
      content:'';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 0, 255, 1);
  }

</style>

</head>

<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1" data-year="100"></label>
<input name="line" type="radio" id="line2" ><label for="line2" data-year="109"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3" data-year=700></label>
<input name="line" type="radio" id="line4" ><label for="line4" data-year="1"></label>
<input name="line" type="radio" id="line5" ><label for="line5" data-year="3"></label>

</div>

</body>
</html>

атрибут data-значение удобная штука, раньше не знал о нем

а здесь transition или animate jQuery можно добавить, что бы было ощущение что он едет, а не резко добавляется

Цитата:

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

а здесь transition

можно но лучше это сделает специалист по css
в jQuery UI есть слайдер, есть кучи других слайдеров.

Да на самом деле этого способа с инпутами вполне достаточно, только анимировать бы и всё, а так отличный вариант

вот тут есть раздел анимации, Вы как думаете, это анимация всего графика или можно анимировать на нем объект?
http://www.chartjs.org/docs/latest/c...nimations.html

есть ли разница между function() и function(event) jQuery

Цитата:

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

function()

это не будет работать в Firefox, если далее будет нужен event