jquery - 如果满足条件，如何使用一个元素触发点击（一个接一个）？

Question

你好，伙计，我有一个问题。我有一个点击事件，点击时会显示（）一个最初隐藏的 div。打开的 div 有一个输入表单

$(".coll-menu-footer input.menu-btn").click(function(e) {
    $("div.new-coll").show();})
});

我想仅在它显示的 div 打开时才使用相同的指挥棒元素提交。

为了使问题易于理解，一个元素，相同的事件，每次启动时的不同动作。

第一次单击显示隐藏的 div，第二次单击提交输入数据。这怎么可能的伴侣。

Answer 1

您可以使用 JQuery 来确定 div 是否仍然隐藏。如果它仍然隐藏，请显示它。如果它没有隐藏，请执行您的提交。

$(".coll-menu-footer input.menu-btn").click(function(e) {
     if($("div.new-coll").is(":visible"))
     {
         //perform your submission code
     }
     else
     {
         $("div.new-coll").show();
     }
});

Answer 2

您可以创建按钮的两种状态，第一种显示隐藏的 div，第二种提交表单。

$(".coll-menu-footer").on('click', 'input.menu-btn:not(.clicked)', function(e) {
    $("div.new-coll").show();
    $(this).addClass('clicked');
});

$(".coll-menu-footer").on('click', 'input.menu-btn.clicked', function(e) {
    $(this).removeClass('clicked');
    // submit and other code here
});

演示

Answer 3

几种可能的方法：

1. 使用 jQuery.toggle()在每次点击时自动应用替代操作。
2. 在您的事件处理程序中，检查页面的状态（打开/关闭）并据此决定要采取的操作。
3. 第一次单击后，卸载第一个事件处理程序，安装一个执行不同操作的不同事件处理程序，依此类推第三个，第四个，等等......
4. 为点击次数保留一个计数器，在您的单个事件处理程序中，查看计数器并决定采取何种操作。