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>

进度条增量/减量

1 个答案: