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

Question

JQUERY 代码：

$('#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 元素，在您单击特定按钮外部并根据单击的按钮为 ${Value} 传递不同的值时关闭。另外一次只有一个 #gaga 元素实例运行。这意味着如果我单击第一个按钮然后单击第二个按钮，只有 ${Value} 会改变，但 p#gaga 元素仍然只有一个。我知道我已经遗漏了按钮哈巴狗代码，我认为没有必要解决这个问题。但如果需要会提供。我尝试使用 switch 语句来做，但我失败了。希望有人能提供帮助。

更新和编辑 根据 https://whosebug.com/users/463319/twisty 在评论中的要求。

代码如下：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;
  }
});

希望对您有所帮助。

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

how to toggle using multiple buttons and pass info to the output JQuery

jquery-ui

button

toggle

pug