如何实现语义UI明星动作的逻辑

Question

我正在尝试实现使语义UI Card's star action起作用的逻辑。

我有一个Card和一个与图标相关联的onclick事件：

<div class="ui card">
  <div class="content">
    <div class="header">
      <a href="/contacts/3">Morticia Addams</a>
    </div>
  </div>
  <div class="extra content">
    <span class="left floated">
      <i onclick="toggle(<%= contact[:id] %>,<%= contact[:is_favorite] %>)" class="star icon"></i>Favorite
    </span>
  </div>
</div>

哪个会触发Javascript函数来发布Ajax帖子：

function toggle(id, state) {

  $.ajax({
      type     : "POST",
      cache    : false,
      url      : `http://localhost:9393/contacts/favorites/toggle/${id}`,
      data     : {state: state},
      success  : function(data) {
        console.log('ajax success!')
        // toggle star action between 'on' and 'off'; does this change the mouse-over icon?
      }
  });

}

ContactsController包含一种POST方法来更新模型：

post '/favorites/toggle/:id' do

  case params[:state]
  when 'Y'
    @current_user.add_favorite(Contact[:id])
  when 'N'
    @current_user.remove_favorite(Contact[:id])
  end

end

问题：

• Semantic-UI是否具有可用于代替toggle()函数的内置逻辑？
• 如何更改star icon的状态及其关联的鼠标悬停值？
• 有没有更好的方法？

来自

到