Как обойти присвоение одинаковых id двум блокам?
Подскажите пожалуйста, есть функция:
$('.year-list li:first').addClass('year-list__item_active');
$('.graph-text').hide();
$('.graph-text:first').show();
$('.year-list li').click (
function () {
$('.year-list li').removeClass('year-list__item_active');
$(this).addClass('year-list__item_active');
$('.graph-text').hide();
var activeItem = $(this).find('a').attr('href');
$(activeItem).fadeIn(600);
return false;
});
Здесь по клику на ссылку открывается блок с id, который прописан в ссылке href="#id" Нужно что бы открывалось два блока сразу, они разные по содержанию, но должны оба открываться по нажатию на ссылку, одинаковые id присвоить двум блокам нельзя, подскажите как поступить в такой ситуации? |
Если в лоб, то например так
$('[id^="' + activeItem.slice(1) + "]').fadeIn(600);
Применится ко всем элементам, id которых начинается с #id: #id, #id2, #id-парам-пам-пам... |
спасибо
|
Но это нужно прописать в href="#id1, #id2" что бы оба открылись или как?
|
NeonMan,
сделайте класс нужным блокам |
класс задам class="class1" class="class2" для нужных блоков, тогда что писать в href ссылки, по нажатию на которую они открываются?
|
Цитата:
|
Цитата:
<a href="#" data-cls=".red"></a> <div class="red"></div> <div class="red"></div> <div class="red"></div>
var activeItem = $(this).find('a').data('cls');
|
И может быть Вы сталкивались с таким моментом, тут когда жмешь на год, внизу добавляется подчеркивание с кругом на конце, жмешь на следующий, добавляется подчеркивание дальше, нажимаешь на предыдущий, убирается, нажимаешь на три назад, убирается с трех
http://joxi.ru/RmzQkQXC06VJMr И можно ли удалить созданную тему? В разделе форматирования не нашел. |
отличное решение! спасибо (data-cls)
|
Цитата:
http://ionden.com/a/plugins/ion.rangeSlider/demo.html |
NeonMan,
набросок ... лучше к специлистам css
<!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);
}
</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>
|
о класс, то что нужно! Если бы еще на графике двигались точки по кривой параллельно, может и такие плагины знаете? может Вам этот знаком? chartjs.org или аналог, но где можно двигать обекты ввиде точек скажем, по кривой
|
NeonMan, соедени с этим https://javascript.ru/forum/jquery/7...tml#post493225 и css trasition.))
|
|
NeonMan,
Line_Charts |
Спасибо! Сейчас всё гляну
|
Вообще мне нужно сделать вот такой график
https://yadi.sk/d/nCR6XKHu3ajoyS Если Вы такой раньше делали, то хорошо, если бы Вы указали на более конкретные библиотеки для него. У меня просто мало времени. Пара дней |
15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц
Из всего этого я выбрал chartJs там в API вроде есть события и анимация, но как привязывать объекты к графику и заставить их двигаться по графику, причем по клику внизу на разделы годов - это самое сложное |
Классная фишка через counter-reset: num 2000; задавать нумерацию годам, но там (в макете) года идут не по порядку, кое где перескакивают через 2-3 значения, можно как-то при таком способе прописать вручную года?
|
Цитата:
<!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>
|
Цитата:
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 можно добавить, что бы было ощущение что он едет, а не резко добавляется
|
Цитата:
в jQuery UI есть слайдер, есть кучи других слайдеров. |
|
Да на самом деле этого способа с инпутами вполне достаточно, только анимировать бы и всё, а так отличный вариант
|
вот тут есть раздел анимации, Вы как думаете, это анимация всего графика или можно анимировать на нем объект?
http://www.chartjs.org/docs/latest/c...nimations.html |
есть ли разница между function() и function(event) jQuery
|
Цитата:
|
А тут еще вопрос появился, перестает работать радио почему-то ^^ после того как привязал событие
<div class="graph-year-list">
<input name="year" type="radio" id="year-1994">
<label for="year-1994" data-year="1994" data-cls=".year-1994"></label>
<input name="year" type="radio" id="year-1995">
<label for="year-1995" data-year="1995" data-cls=".year-1995"></label>
</div>
$('.graph-text').hide();
$('.graph-text:first').show();
$('.graph-year-list label').click (
function () {
$('.graph-text').hide();
var activeItem = $(this).data('cls');
$(activeItem).fadeIn(600);
return false;
});
пробовал обернуть каждый label input в div и нажимая на див всё ровно не работает радио, если привязано событие |
Цитата:
|
Цитата:
$("a").click(function () { event.preventDefault()// здесь в Firefox будет ошибка. }) |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Вот что у нас получилось
график анимировать пока не удается параллельно нажатию на год, так что наверное вставлю картинкой кривые графика, точки графика вырежу относительно каждого года на кривых графика и будут появляться они(точки) соответственно нажатию на каждый год, норм?) |
NeonMan,
:victory: |
| Часовой пояс GMT +3, время: 11:06. |