進度條增量/減量

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>