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

问题

JQUERY CODE:

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

PUG CODE FOR #gaga element:

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

PUG CODE FOR #gaga element:

How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it. I tried doing it using switch statements but I have failed. Hopefully someone can help.

UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.

Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/

After doing some research I have made some progress... but I am still stuck. I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code. Also, if you don't mind is .data() use to assign or get a value. PS: Got this code from this answer : Fixing toggle with two buttons and modified it a bit, but I am still not able to achieve my desired result.

回答1:

If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.

Example: 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;
  }
});

Hope that helps.

来源：https://stackoverflow.com/questions/50898801/how-to-toggle-using-multiple-buttons-and-pass-info-to-the-output-jquery