javascript，一个独特的按钮上有2个不同的功能，有2个事件答案

【问题标题】：javascript, 2 different function on a unique button, with 2 eventsjavascript，一个独特的按钮上有2个不同的功能，有2个事件
【发布时间】：2016-11-26 19:18:40
【问题描述】：

我想构建一个 JS 脚本，在 1 个按钮中添加 2 个 onClick 事件。这两个事件必须分开工作：前任。第一次点击按钮：事件A

第二次点击同一个按钮：事件B

这是我的代码：

html按钮：按一次显示一个div，再按一次显示另一个div

<button id="add-form" class="add"><a class="btn" href="#"><i class="fa fa-plus-circle fa-2x"></i></a></button>-->

...
...

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

2 div 在开始时被隐藏

  $("#div2").hide();
  $("#div3").hide()

这就是（尝试）一次显示 2 个 div 的功能

    $("#add-form").click(function(){
      $("#viaggio2").fadeIn();
    }$("#add-form").click(function(){
      ("#viaggio3").fadeIn();
    });

  });
  </script>

PS。抱歉我的英语不好，感谢所有试图帮助我的人！ :)

【问题讨论】：

你在使用 jQuery 吗？
你尝试了什么？你能显示你的代码吗？

标签： javascript html function events button

【解决方案1】：

您可以在jQuery 中简单地做到这一点

$( "#target" ).toggle(function() {
  alert( "calling function 1" );
}, function() {
  alert( "calling function 2" );
});

文档

如果提供了两个以上的处理程序，.toggle() 将在所有处理程序之间循环。例如，如果有三个处理程序，那么第一个处理程序将在第一次单击、第四次单击、第七次单击时调用，依此类推。

注意

此方法签名在 jQuery 1.8 中已弃用并在 jQuery 1.9。 jQuery 还提供了一个名为 .toggle() 的动画方法切换元素的可见性。不管是动画还是触发事件方法取决于传递的参数集。

但根据您的要求，toggleClass 可以轻松完成

$("#add-form").click(function(){
      $(this).toggleClass("add-form add-form2")
      $("#viaggio2").fadeIn();})
$("#add-form2").click(function(){
$(this).toggleClass("add-form add-form2")
      $("#viaggio3").fadeIn();})

【讨论】：

嗯，我已经用我的代码尝试过了，但它不起作用..我的按钮 id 是“#A”，我必须在 2 次单独点击时显示的 2 个 div 是 id “#divA”和“#divB”。所以一次显示一个的代码是：$("#A").toggle(function(){ $("#divA").show();], function(){ $("#divB").show();}); 对吗？
@LucaZambon 如果您使用的是 jQuery >1.9，它将无法正常工作，所以我编辑了答案，检查一次
谢谢老兄的回复，但还是不行。使用这种方法，它仍然会在同一次点击中显示所有 2 个事件。
@LucaZambon 确保你有班级名称，如果可能的话邀请聊天
@LucaZambon 我错过了拼写你的 ID viaggio2 现在我已更正希望这可行

【解决方案2】：

您可以附加一个事件，但前有计数器：

 var condition = 0;

 document.querySelector('.my-button').addEventListener('click', function() {

  if(condition === 0) { /* logic 1 */
  else if (condition === 1) { /* logic 2 */}

  condition++;
 });

【讨论】：

我认为他不想“切换” - 但是是的，它会切换，他必须重置计数器。
他只说：一个-> A，第二个-> B，他没说第三个-> A

【解决方案3】：

jQuery .toggle() 方法有一些优雅，但它确实带有一些您可能没有预料到的额外功能。请务必在实施前阅读文档。

更普通的方法是这样的：

// keep track of button clicks
var buttonClickCount = 0;

document.getElementById('myButton').addEventListener('click', function(){

  // increment the button click count
  ++buttonClickCount;

  // on the first click, eventA
  if(buttonClickCount===1){
    eventA();
  }

  // on the second click, eventB
  if(buttonClickCount===2){
    eventB();
  }
});

function eventA(){
  console.log('Event A');
}

function eventB(){
  console.log('Event B');
}

【讨论】：