进度条 Increment/Decrement

Question

我需要一些有关 semantic UI 进度条的帮助。我正在尝试使用 increment/decrement 按钮复制第一个示例，但对于我来说，无法让它工作，任何关于此事的帮助或使用 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 被分配到最近找到的进度条。最后，我们检查按钮的 class（以了解它是否为 in/decrement）并相应地使用 .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>

进度条 Increment/Decrement

Progress Bar Increment/Decrement

jquery

semantic-ui