如何使语义 UI 按钮组可选

Question

如何使语义 UI Button Group 可选，以便我可以得到在 PHP 中选择的那个？

这里是按钮组：

<div class="huge ui buttons">
  <div class="ui button">One</div>
  <div class="ui button">Two</div>
  <div class="ui button">Three</div>
</div>

我假设我们将按钮视为单选按钮，其中只能选择一个，但语义 UI 并没有任何文档说明如何对按钮组执行相同操作。

如何使按钮可选，以便将其发送到我的 PHP 脚本？

编辑：

Here 是一个 jsFiddle，它显示了在尝试实现切换后我的按钮组现在如何，如图所示 here

Answer 1

每当按下按钮时语义 UI 都会为该按钮提供一个名为 active 的类名。

要从您的组中进行选择，您可以：

var selected = document.querySelector(".huge.ui.buttons").querySelector(".active");

这将选择带有第一部分的 UI 组，并返回带有第二部分的选定元素。您可以对所选元素执行操作，例如selected.textContent。这将返回元素的显示文本。

---

既然你已经标记了 jQuery，我也将提供一个 jQuery 示例：

var selected = $(".huge.ui.buttons").find(".active");

注意：请注意，您可能会创建多个具有相同类名的组 (huge ui buttons)。您需要区分它们。要么使用 document.querySelectorAll 并使用其 index 选择适当的元素，要么为每个组分配一个唯一 ID，以便您可以使用 document.getElementById 访问该组。

注意 2： Semantic 并未对此进行记录，但他们使用页面上的附加代码将按钮设置为活动状态。你可以在这里找到它。 How to toggle content in Semantic UI buttons?。我对其进行了修改以与您的 Fiddle 一起使用。 http://jsfiddle.net/cgz7sv4g/2/

---

语义用户界面插件：

semantic = {};
// ready event
semantic.ready = function() {

  // selector cache
  var
    $buttons = $('.ui.buttons .button'),
    $toggle  = $('.main .ui.toggle.button'),
    $button  = $('.ui.button').not($buttons).not($toggle),
    // alias
    handler = {

      activate: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active')
        ;
      }

    }
  ;

  $buttons
    .on('click', handler.activate)
  ;


// attach ready event
$(document)
  .ready(semantic.ready)
;

此代码块将使用处理程序扩展您的语义按钮，该处理程序将类 active 添加到当前单击的元素并将其从组中的其他元素中删除。您可以使用此代码扩展 语义 UI 的 元素。使用基本的 jQuery，因为 语义 UI 是基于 jQuery 构建的平台。

编辑：

---

通过表单请求发送div的内容

• 需要隐藏输入

Javascript

 var selected = $(".huge.ui.buttons").find(".active").text();
 $("#div_content").val(selected);