javascript - セマンティック UI モーダルでカスタム コールバックを使用する方法

Question

easy、normalおよびなどのフィードバック目的で、セマンティック UI モーダルで 2 つ以上のボタンを使用したいと考えていますhard。また、クリックされたボタンに応じてアクションを実行する必要もあります。

承認ボタンと拒否ボタンの使い方を知っています (2 つのボタンに使用できます)。しかし、これらの 3 つのボタンを 3 つの異なるコールバックで処理する方法。

または、これに対する代替ソリューション。

Answer 1

onApprove: function (e) {
    console.log(e); // returns the button
}

だからhtml：

<div class="ui modal">
  <div class="content">
    choose
  </div>
  <div class="actions">
    <button class="ui button easy ok">easy</button>
    <button class="ui button normal ok">normal</button>
    <button class="ui button hard ok">hard</button>
  </div>
</div>

そしてjs：

$('.ui.modal').modal({
  onApprove: function (e) {
    if (e.hasClass('easy')) {
       yourstuff()
    }
    if (e.hasClass('normal')) {
       yourstuff()
    }
    if (e.hasClass('hard')) {
       yourstuff()
    }
  },
}).modal('show')