如何使用多个按钮进行切换并将信息传递到输出JQuery [英] how to toggle using multiple buttons and pass info to the output JQuery

问题描述

JQUERY代码:

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

#gaga元素的广告代码:

PUG CODE FOR #gaga element:

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

PUG CODE FOR #gaga element:

当按钮处于活动状态时，如何使用三个按钮在#gaga元素上切换，在特定按钮之外单击并为${Value}传递不同的值(取决于所单击的按钮)时，该按钮将关闭.另外，一次只能运行#gaga元素的一个实例.这意味着，如果我单击第一个按钮，然后单击第二个按钮，则仅${Value}会更改，但p#gaga元素仅保留一个.我知道我已经遗漏了按钮的哈巴狗代码，我认为解决这个问题不是必需的.但是如果需要的话会提供. 我尝试使用switch语句执行此操作，但失败了.希望有人可以提供帮助.

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.

更新&根据评论中的 https://stackoverflow.com/users/463319/twisty 的要求进行编辑.

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

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

做完一些研究后，我取得了一些进步……但是我仍然被困住了. 我试图以这样一种方式进行操作:当我单击性别按钮之外的任何位置时，输入消失，而当我单击另一个按钮时，输入也将相应更改.另外，除了输入之外，我还想显示和隐藏html代码中的模板. 另外，如果您不介意.data()，则可以使用它来分配或获取值. PS:从此答案中获得了此代码:使用两个按钮固定切换 并对其进行了一些修改，但是我仍然无法达到我想要的结果.

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.

推荐答案

如果您查看Menu的API，则它们的_closeOnDocumentClick()很好.您可以通过类似的方式在代码中简单地使用它.

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

示例: 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！