Увеличение/Уменьшение полосы хода

Question

Мне нужна помощь с индикатором выполнения от semantic UI. Я пытаюсь воспроизвести первый пример с помощью кнопки increment/decment, но для жизни я не могу заставить ее работать, любая помощь по этому вопросу или образец с Javascript-кодом будет с благодарностью оценена.

Answer 1

Код этой странице located here, и вы смотрите на этом участке, в частности:

$buttons 
    .on('click', function() { 
    var 
     $progress = $(this).closest('.example').find('.ui.progress') 
    ; 
    if($(this).hasClass('increment')) { 
     $progress.progress('increment'); 
    } 
    else { 
     $progress.progress('decrement'); 
    } 
    }) 
; 

Как вы можете видеть, каждая кнопка добавляется click событие. Затем $progress присваивается ближайший найденный индикатор выполнения. Наконец, мы проверяем класс кнопки (знать, находится ли она в/декремент), и значение .progress используется соответствующим образом.

В то время как мы в этом, вот HTML они используют для кнопок:

<div class="example"> 
    <div class="ui progress"> 
    <div class="bar"> 
     <div class="progress"></div> 
    </div> 
    </div> 
    <div class="ui icon buttons"> 
    <div class="decrement ui basic red button"><i class="minus icon"></i></div> 
    <div class="increment ui basic green button"><i class="plus icon"></i></div> 
    </div> 
</div>