进度条增量/减量

Question

我需要一些来自semantic UI的进度条帮助。我试图用递增/递减按钮复制第一个示例，但对于我的生活，无法使其工作，任何关于此问题的帮助或使用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>