Javascript-форум - Массивы jquery

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

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

- - Массивы jquery (https://javascript.ru/forum/jquery/60881-massivy-jquery.html)

Artem_A

25.01.2016 13:50

Массивы 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 первый элемент массива, ко второму второй, к третьему третий

Mess4me

25.01.2016 15:08

Artem_A,
а если на вторую кнопку в nav нажали , то как должно быть?

Artem_A

25.01.2016 15:14

Mess4me,
из второго массива загружаются элементы и вставляются таким же образом

Mess4me

25.01.2016 15:43

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>

Artem_A

25.01.2016 15:57

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) + '%');
  });
});

Artem_A

25.01.2016 15:58

Mess4me,
и чтобы первый массив загружался когда я мышкой доскролю до прогресс бара) Это возможно?

Artem_A

25.01.2016 16:37

Mess4me,
У вас есть идеи?

Artem_A

25.01.2016 16:40

Mess4me,
Вот доки, если что

https://github.com/kottenator/jquery-circle-progress

Artem_A

25.01.2016 16:59

Mess4me,
Чтобы он запускался, когда до него скролишь я сделал
но так как значения не загружаются из первого массива при загрузки, то получаются 0% в прогрессбаре, и нажимая все равно прогресс бар не меняется, хотя атрибут data-value меняется

Mess4me

25.01.2016 17:11

Artem_A,

Цитата:

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

value: circles.data("value"),

здесь проверяли , значение правильно получается ?!

Artem_A

25.01.2016 17:27

Mess4me,
он все подставляет, но прогресс бар не работает

Artem_A

25.01.2016 17:40

Mess4me,
и да вместо value: circles.data("value"), подставлял число и оно работало

Artem_A

25.01.2016 17:48

Mess4me,
А если сделать вручную, то все они загрузятся со значением 0.3, а не 0.3, 0.4, 0.5

<div id="circles">
            <div class="circle" data-value="0.3">
              <strong></strong>
            </div>
          <div class="circle" data-value="0.4">
            <strong></strong>
          </div>
          <div class="circle" data-value="0.5">
            <strong></strong>
          </div>

Artem_A

25.01.2016 17:58

Mess4me,
так, последнее решил, теперь чтобы из массива работали нужно

Mess4me

25.01.2016 18:11

Artem_A,
теперь

var newCicles = document.querySelectorAll('.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) + '%');
  });
});

Mess4me

25.01.2016 18:15

Artem_A,

теперь так наверное

var newCicles = document.querySelectorAll('.circle');
            
            newCicles.forEach(function (el) {
                el.circleProgress({
                    startAngle: -Math.PI /2 * 8 ,
                    lineCap: 'round',
                    value: el.getAttribute('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) + '%');
                });
            });

Artem_A

25.01.2016 18:27

в общем мы сделали, вот код

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 = $('div.circle');
var lis = $('#nav_slider a');
lis.on('click', function (a) {
 var inx = $(this).index();

 circles.each(function(element){
   $(this).circleProgress({
       startAngle: -Math.PI /2 * 8 ,
       size: 130,
       lineCap: 'round',
       value: progressBarArrays[inx][element],
       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) + '%');
   });
 })
});

$('.activeSlide.detailsIcon').click()


var el = $('div.circle');
 var inited = false;

 el.appear({ force_process: true });

 el.on('appear', function() {
   if(!inited){
     $(this).circleProgress({
       value: $(this).data("value")
     });
     //inited = true;
   }
 });
});

Artem_A

25.01.2016 18:27

Mess4me,
Спасибо большое за помощь и терпение!!

Mess4me

25.01.2016 18:28

Artem_A,
:victory:

Artem_A

25.01.2016 18:31

Mess4me,
только еще одно но, когда скроллишь он делает задержки 01% 01% 01% дергается, а потом только загружается, и если скролл убираешь потом опять приходишь к прогресс бару он заново загружается

Artem_A

25.01.2016 18:33

Mess4me,
это из-за вырезки inited = true;,
но если ее разкоментить, то при скролле будет загружаться только первый, а второй и третий блок будут уже загружены

Artem_A

25.01.2016 18:40

Mess4me,
решили проблему, спасибо еще раз большое)

Artem_A

25.01.2016 18:41

el.appear({ force_process: true });

  el.each(function(i){
    $(this).on('appear', function() {
      if(!inited){
        $(this).circleProgress({
        });
        if(i == 2){
          inited = true;
        }
      }
    });
  })

Часовой пояс GMT +3, время: 00:45.