ProgressBar. js не работает на Inte rnet Explorer 11 - PullRequest
Новая
       12

ProgressBar. js не работает на Inte rnet Explorer 11

0 голосов
/ 24 февраля 2020

У меня есть этот штрих-код, который отлично работает на chrome, но не работает на Inte rnet Explorer 11. Он ничего не делает, когда я нажимаю на плюс или минус. Может ли кто-нибудь помочь мне, взглянув на JavaScript ниже и сказать мне, если вы видите что-то, что выглядит неправильно для Inte rnet Explorer 

<div class="slide-elements">
     <div class="col-3">
        <a href="javascript:void(0)" class="minusValue" data-id="{{ passion.id }}" data-name="{{ passion.description }}" data-value="{{ passion.userValue }}"><img src="{{ asset('assets/images/profile/ico-meno.png') }}"></a>
     </div>
     <div class="col-8">
        <div id="{{ passion.description }}" style="background-image: url({{ passion.icon }})" class="progressbar-custom"></div>
        <div class="profile-name">{{ passion.description|capitalize|replace('-', ' ') }}</div>
     </div>
     <div class="col-3">
       <a href="javascript:void(0)" class="plusValue" data-id="{{ passion.id }}" data-name="{{ passion.description }}" data-value="{{ passion.userValue }}"><img src="{{ asset('assets/images/profile/ico-piu.png') }}"> </a>
     </div>
</div>

Вот код JavaScript 

    var bars = [];
    for(let i = 0; i<passionJson.length; i++){
        bars[passionJson[i].description] = new ProgressBar.Circle(`#${passionJson[i].description}`, {
            color: '#00AFD0',
            trailColor: '#CCCCCC',
            trailWidth: 1,
            duration: 500,
            easing: 'linear',
            strokeWidth: 6,
            from: {color: '#00AFD0', a:0},
            to: {color: '#00AFD0', a:0},
            // Set default step function for all animate calls
            step: function(state, circle) {
                circle.path.setAttribute('stroke', state.color);
            }
        });
        bars[passionJson[i].description].animate(passionJson[i].userValue / 100);
    }




    var passions = [];
    $('.plusValue').click((e) =>{
        var passionId = e.currentTarget.dataset.id;
        var val = parseInt(e.currentTarget.dataset.value);
        var passion = e.currentTarget.dataset.name;
        var result = passions.find( passion => passion.idpassion === passionId );
        if(!result){
            passions.push({'idpassion' : passionId, 'value': val + 20});
            if((val + 20) <= 100) bars[passion].animate((val + 20) /100);
        } else {
            result.value += 20;
            if(result.value > 100) result.value = 100;
            passions = passions.filter(item => item.idpassion !== passionId);
            passions.push(result);
            if((result.value) <= 100) bars[passion].animate(result.value /100);
        }
    });

    $('.minusValue').click((e) =>{
        var passionId = e.currentTarget.dataset.id;
        var val = parseInt(e.currentTarget.dataset.value);
        var passion = e.currentTarget.dataset.name;
        var result = passions.find( passion => passion.idpassion === passionId );
        if(!result){
            passions.push({'idpassion' : passionId, 'value': val - 20});
            if(val - 20 >= 0) bars[passion].animate((val - 20) /100);
        } else {
            result.value -= 20;
            if(result.value < 0) result.value = 0;
            passions = passions.filter(item => item.idpassion !== passionId);
            passions.push(result);
            if(result.value >= 0) bars[passion].animate(result.value /100);
        }
    });
...