如何使用多个按钮进行切换并将信息传递给输出 JQuery

Question

查询代码：

$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
    $('#gaga').toggle         
})

#gaga 元素的 PUG 代码：

p#gaga
 | This is `${Value}`    

PUG CODE FOR #gaga element:

如何使用三个按钮在按钮处于活动状态时切换#gaga 元素，在您在特定按钮外部单击时切换#gaga 元素，并根据单击的按钮为${Value} 传递不同的值。另外，一次只运行一个#gaga 元素实例。这意味着如果我单击第一个按钮然后单击第二个按钮，则只有 ${Value} 会改变，但 p#gaga 元素仍然只有一个。我知道我遗漏了按钮哈巴狗代码，我认为解决问题没有必要。但如果需要会提供。 我尝试使用 switch 语句来做，但我失败了。希望有人可以提供帮助。

更新和编辑应 https://stackoverflow.com/users/463319/twisty 在 cmets 中的要求。

这里是代码：https://jsfiddle.net/YulePale/mdvnf0qt/4/

在做了一些研究之后，我取得了一些进展......但我仍然陷入困境。 我试图以这样一种方式做到这一点，当我点击性别按钮之外的任何地方时，输入消失，当我点击另一个按钮时，它会适当地改变。另外，我想在 html 代码中显示和隐藏模板，而不是输入。 此外，如果您不介意 .data() 用于分配或获取值。 PS：从这个答案得到这个代码：Fixing toggle with two buttons 并稍作修改，但我仍然无法达到我想要的结果。

Answer 1

如果您查看菜单的 API，他们有一个很好的 _closeOnDocumentClick()。您可以以类似的方式在代码中简单地使用它。

示例：https://jsfiddle.net/Twisty/0x43bf8q/

JavaScript

$(function() {
  $("input[type='button']").on('click', toggleOptions)
    .first()
    .trigger('click');

  $(document).on("click", function(e) {
    if (emptyOnDocumentClick(e)) {
      $('[name=gender]').val("");
    }
  });

  function toggleOptions() {
    var $this = $(this),
      onClass = 'button-toggle-on';

    $this.toggleClass(onClass)
      .siblings('input[type=button]')
      .removeClass(onClass);

    var gender = $this.filter('.' + onClass).data('gender');
    $('[name=gender]').val(gender);
  }

  function emptyOnDocumentClick(event) {
    return !$(event.target).closest("input[type='button']").length;
  }
});

希望对您有所帮助。