не работает добавление класса addClass

190

12 сентября 2018, 07:10

Помогите пожалуйста разобраться, почему не происходит добавление класса через addClass? Есть noUIslider, я ему через span добавил проценты ниже, при прокрутке слайдера спану должен добавлять класс, который будет менять цвет процентов, но этого не происходит.

HTML

   <div id="slider">
                  <div class="scale">
                      <span class="scale0">0%</span>
                      <span class="scale10">10%</span>
                      <span class="scale20">20%</span>
                      <span class="scale30">30%</span>
                      <span class="scale40">40%</span>
                      <span class="scale50">50%</span>
                      <span class="scale60">60%</span>
                      <span class="scale70">70%</span>
                  </div>
                </div>

CSS

.scale {
    margin: 7px 0 0;
    position: relative;
    height: 10px;
    color: slateblue;
    font-size: 12px;
    line-height: 10px;
}
.highlight {
    color: #ef0000;
}

Javascript

function update_slider_percent_scales (percents) {
    var ar = [
        { percent:  0, classes: '.scale .scale0' },
        { percent: 10, classes: '.scale .scale10' },
        { percent: 20, classes: '.scale .scale20' },
        { percent: 30, classes: '.scale .scale30' },
        { percent: 40, classes: '.scale .scale40' },
        { percent: 50, classes: '.scale .scale50' },
        { percent: 60, classes: '.scale .scale60' },
        { percent: 70, classes: '.scale .scale70' }
    ];
    for (var i = 0; i < ar.length; i++) {
        var item = ar[i];
        if ((Math.abs(percents - item.percent) < 0.0001) || (item.percent <= percents)) {
            $(item.classes).addClass('highlight');
        }
        else {
            $(item.classes).removeClass('highlight');
        }
    }
};

Answer 1

Попробуйте, например, вместо '.scale .scale0' просто '.scale0'

Если важно указывать родительский див тогда можно так:

function update_slider_percent_scales (percents) { 
    var ar = [ 
        { percent:  0, parent: '.scale', children: '.scale0' }, 
        { percent: 10, parent: '.scale', children: '.scale10' }, 
        { percent: 20, parent: '.scale', children: '.scale20' }, 
        { percent: 30, parent: '.scale', children: '.scale30' }, 
        { percent: 40, parent: '.scale', children: '.scale40' }, 
        { percent: 50, parent: '.scale', children: '.scale50' }, 
        { percent: 60, parent: '.scale', children: '.scale60' }, 
        { percent: 70, parent: '.scale', children: '.scale70' } 
    ]; 
    for (var i = 0; i < ar.length; i++) { 
        var item = ar[i]; 
        if ((Math.abs(percents - item.percent) < 0.0001) || (item.percent <= percents)) { 
            $(item.parent).children(item.children).addClass('highlight'); 
        } 
        else { 
            $(item.parent).children(item.children).removeClass('highlight'); 
        } 
    } 
}; 
 
$(function() { 
    $('#cl').click(function () { 
       update_slider_percent_scales(40); 
    }); 
});

.scale { 
    margin: 7px 0 0; 
    position: relative; 
    height: 10px; 
    color: slateblue; 
    font-size: 12px; 
    line-height: 10px; 
} 
 
.highlight { 
    color: #ef0000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="slider"> 
                  <div class="scale"> 
                      <span class="scale0">0%</span> 
                      <span class="scale10">10%</span> 
                      <span class="scale20">20%</span> 
                      <span class="scale30">30%</span> 
                      <span class="scale40">40%</span> 
                      <span class="scale50">50%</span> 
                      <span class="scale60">60%</span> 
                      <span class="scale70">70%</span> 
                  </div> 
                </div> 
                 
                <div id="cl">DEMO</div>