Массивы jquery
Есть код
<div id="pager_slider">
<section class="page1">
</section>
<section class="page2">
</section>
<section class="page3">
<h2>Grafic Design3</h2>
<p class="b_text"></p>
<p class="s_text"> </p>
</section>
<section class="page4">
</section>
</div>
<div id="progress_bar">
<div id="circles">
<div class="circle">
<strong></strong>
</div>
</div>
<div class="circle">
<strong></strong>
</div>
<div class="circle">
<strong></strong>
</div>
</div>
$(function(){
$('#pager_slider').cycle({
fx: 'scrollDown',
timeout: 0,
speed: 1000,
easing: 'easeOutCubic',
pager: '#nav_slider'
});
$(document.body).on("click", "#nav_slider a[href^='#']", function(){
$('#nav_slider a').addClass('noActive').removeClass('activeSlide');
$(this).addClass('activeSlide').removeClass('noActive');
});
$('#nav_slider a').addClass('detailsIcon').text('');
});
// circle progressbar for our_services
$(function(){
var c4 = $('.circle');
c4.circleProgress({
startAngle: -Math.PI /2 * 8 ,
lineCap: 'round',
value: c4.data("value"),
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
});
var progressBarArray1 = ["0.75","0.36","0.21"]
var progressBarArray2 = ["0.25","0.43","0.33"]
var progressBarArray3 = ["0.40","0.75","0.54"]
var progressBarArray4 = ["0.75","0.78","0.46"]
Как сделать, чтобы по клику в навигации, загружались к div.circle добавлялся атрибут data-value и загружались элементы из массива. Т.е я нажимаю на первую кнопку в nav он загружает из первого массива значения и расставляет к первому элементу с классом circle первый элемент массива, ко второму второй, к третьему третий |
Artem_A,
а если на вторую кнопку в nav нажали , то как должно быть? |
Mess4me,
из второго массива загружаются элементы и вставляются таким же образом |
Artem_A,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<nav id="nav">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div id="pager_slider">
<section class="page1">
</section>
<section class="page2">
</section>
<section class="page3">
<h2>Grafic Design3</h2>
<p class="b_text"></p>
<p class="s_text"> </p>
</section>
<section class="page4">
</section>
</div>
<div id="progress_bar">
<div id="circles">
<div class="circle">
<strong></strong>
</div>
</div>
<div class="circle">
<strong></strong>
</div>
<div class="circle">
<strong></strong>
</div>
</div>
<script>
$(function(){
/*
$(document.body).on("click", "#nav_slider a[href^='#']", function(){
$('#nav_slider a').addClass('noActive').removeClass('activeSlide');
$(this).addClass('activeSlide').removeClass('noActive');
});
$('#nav_slider a').addClass('detailsIcon').text('');*/
});
var progressBarArray1 = ["0.75","0.36","0.21"];
var progressBarArray2 = ["0.25","0.43","0.33"];
var progressBarArray3 = ["0.40","0.75","0.54"];
var progressBarArray4 = ["0.75","0.78","0.46"];
var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];
// circle progressbar for our_services
$(function(){
var circles = $('.circle');
var lis = $('#nav li');
lis.on('click', function (li) {
var inx = $(this).index();
var i =0;
[].forEach.call(circles, function (el) {
$(el).attr('data-value',progressBarArrays[inx][i++])
});
})
});
</script>
</body>
</html>
|
Mess4me,
Да! он добавляет данные масива как надо, но в прогресс баре нет изменений 0% стоит
var progressBarArray1 = ["0.75","0.36","0.21"];
var progressBarArray2 = ["0.25","0.43","0.33"];
var progressBarArray3 = ["0.40","0.75","0.54"];
var progressBarArray4 = ["0.75","0.78","0.46"];
var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];
$(function(){
var circles = $('.circle');
var lis = $('#nav_slider a');
lis.on('click', function (a) {
var inx = $(this).index();
var i =0;
[].forEach.call(circles, function (el) {
$(el).attr('data-value',progressBarArrays[inx][i++])
});
});
circles.circleProgress({
startAngle: -Math.PI /2 * 8 ,
size: 130,
lineCap: 'round',
value: circles.data("value"),
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
});
|
Mess4me,
и чтобы первый массив загружался когда я мышкой доскролю до прогресс бара) Это возможно? |
Mess4me,
У вас есть идеи? |
|
Mess4me,
Чтобы он запускался, когда до него скролишь я сделал но так как значения не загружаются из первого массива при загрузки, то получаются 0% в прогрессбаре, и нажимая все равно прогресс бар не меняется, хотя атрибут data-value меняется |
Artem_A,
Цитата:
|
| Часовой пояс GMT +3, время: 19:36. |