是否有可能使一个html按钮执行2个不同的jquery函数，第一个完成后第二个开始

Is it possible to make one html button execute 2 different jquery functions that the 2nd one starts after the first one is complete

本文关键字：函数 jquery 第一个开始第二个 2个有可能执行按钮 html 一个更新时间：2023-09-26

我正在为项目单位做一个小组，任务是用cms和api制作一个功能正常的假网站。

我一直在尝试创建一个过滤器的类别的帖子的每个按钮过滤掉所有的主题，除了你点击的一个。我一直试图在jquery中使用点击方法来隐藏和显示按钮被点击时的帖子，我也试图有一个按钮来显示和隐藏所有的帖子。

第一个我运行它的工作，但然后显示所有按钮后的帖子有隐藏和显示内联样式的阻止其他类别按钮过滤掉不相关的帖子，并隐藏与按钮相关的帖子。

我也使用引导从http://getbootstrap.com/和谷歌字体。

有谁能帮帮我吗?

var clickOnce = false;
        $('.filter-button-group button').click(function() {
             if (!clickOnce) {
                $('.grid > div').hide();
                $('.grid .' + this.className).show();
                clickOnce = true;
            } else {
                $('.grid .' + this.className).toggle();
            }
        });
    // for the disply all button
    $("#filter-button-group_1 button").on('click', function(){
          
              $(".grid > div").toggle();
          
    });

 <div class="well">
                    <h4>Blog Categories</h4>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="filter-button-group blog-cat">
                                <button type="button" class="cat_1">Infrastructure
                                </button>
                                <button class="cat_2">Announcements
                                </button>
                                <button class="cat_3">Political allies
                                </button>
                                <button class="cat_4">Budget reports
                                </button>
                            </div>
                        </div>
                        <!-- /.col-lg-6 -->
                        <div class="col-lg-6">
                            <div class="filter-button-group blog-cat">
                                <button class="cat_5">Legal matters
                                </button>
                                <button class="cat_6">World events
                                </button>
                                <button class="cat_7">Personal affairs
                                </button>                                
                            </div>
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>
                    <!-- /.row -->
                </div>
                <div class="grid">
                      <!-- First Blog Post -->
                    <div class="cat_3 cat_6">
                         <h2>Lorem ipsum dolor sit amet</h2>
                        <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 28, 2015 at 10:15 PM</p>
                        <ul class="blog-tags">
                            <li>Political allies</li>
                            <li>World affairs</li>
                        </ul><br>
                        <hr>
                        <img class="img-responsive" src="img/blog-three.jpg" alt="Lorem ipsum dolor sit amet">
                        <hr>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <div class="row-fluid summary">
                            <div id="blog-detail" class="collapse"> 
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div>
                        </div>
                        <div class="row-fluid summary">
                            <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail">Show more +</button>
                        </div>
                        
                        <hr>
                    </div>
                     
                     <!-- Second Blog Post -->
                     <div class="cat_2 cat_5 cat_6">
                         <h2>Lorem ipsum dolor sit amet</h2>
                         <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 25, 2015 at 9:40 AM</p>
                         <ul class="blog-tags">
                             <li>Announcements</li>
                             <li>Legal matters</li>
                             <li>World events</li>
                         </ul><br>
                         <hr>
                         <img class="img-responsive" src="img/blog-nuclear.jpg" alt="Lorem ipsum dolor sit amet">
                         <hr>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                         <div class="row-fluid summary">
                             <div id="blog-detail-2" class="collapse"> 
                                 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                             </div>
                         </div>
                         <div class="row-fluid summary">
                            <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail-2">Show more +</button>
                        </div>
                         
                         <hr>
                      </div>
  
                     <!-- Third Blog Post -->
                     <div class="cat_3 cat_5 cat_6">
                         <h2>Lorem ipsum dolor sit amet</h2>
                         
                         <p class="text-muted"><i class="fa fa-clock-o"></i> Posted on September 21, 2015 at 3:20 PM</p>
                         <ul class="blog-tags">
                             <li>Political allies</li>
                             <li>Legal matters</li>
                             <li>World events</li>
                         </ul><br>
                         <hr>
                         <img class="img-responsive" src="img/blog-nk.jpg" alt="Lorem ipsum dolor sit amet">
                         <hr>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                         <div class="row-fluid summary">
                             <div id="blog-detail-3" class="collapse"> 
                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                             </div>
                         </div>
                         <div class="row-fluid summary">
                            <button class="btn btn-sml" data-toggle="collapse" data-target="#blog-detail-3">Show more +</button>
                        </div>
                         
                         <hr>
                     </div>
                  </div>
<div class="row-fluid summary" id="filter-button-group_1">
              <button class="cat_1 cat_2 cat_3 cat_4 cat_5 cat_6 cat_7" data-toggle="collapse" data-target="#blog-old">Display all posts</button>
          </div>

从你的标题来看，试试这个

function functionOne() {
    alert('functionOne complete');
    functionTwo();
}
function functionTwo() {
    alert('functionTwo running');  
}

<input type="button" value="button" onclick="functionOne();">

JQuery也有可选的回调函数。例如…

$('test').fadeOut(800, function(){
//this functions runs after the fade.
});

不知道你到底想要什么，但如果你想要一个按钮，可以做两个函数，只运行函数2在函数1已经运行后，你可以这样做:

HTML:

<input type="button" value="button" onclick="btn_toggle();">

JavaScript:

var f01_complete = false;
function btn_toggle(){
    if (f01_complete != true){
        function_01();
    }else{
        function_02();
    }
}
function function_01() {
    alert("do stuff");
    f01_complete = true;
}
function function_02() {
    alert("do stuff 2");
    f01_complete = false;
}

我认为你想在单个元素上设置多个单击事件，但有某种执行优先级。我建议使用以下方法来使用jQuery提供的功能。它基本上使用bind和trigger。

<input type="button" value="button">
jQuery

//Caching input var inputCached = $("input"); inputCached.click(function(){ //Triggering each of them in order $(this).trigger("priorityone"); $(this).trigger("prioritytwo"); }); //Binded this priority 1 function to the input inputCached.bind("priorityone", function(){ alert("test1"); }); //Binded this priority 2 function to the input inputCached.bind("prioritytwo", function(){ alert("test2"); });
演示https://jsfiddle.net/7ub1j3d4/

这个问题或多或少是关于:同一个事件的多个处理程序

假设您有两个处理程序f和g，并且希望确保它们以已知的固定顺序执行，那么只需封装它们:

$("...").click(function(event){ f(event); g(event); });
这样(从jQuery的角度来看)只有一个处理程序，它以指定的顺序调用f和g。
相关文章：
执行ajax成功函数-jQUERY

函数jquery.html(）不提供数据属性集值

将变量放入ajax函数JQuery

函数jquery的未定义返回

如何在嵌套函数jquery上保持变量的值不变

用我的函数jquery给出数据/参数

Firefox在调用函数(jquery）时冻结

在传递节时触发一个函数 - jquery

循环执行数组函数jQuery

在函数中调用另一个函数JQuery

对象不是函数-Jquery/JavaScript

TypeError:对象不是函数-jquery

获取函数jQuery设置的属性

从函数jquery获取更新的变量值

切换而不是悬停函数jQuery

函数jQuery.animation(）运行了两次行，但不起作用

使用函数 jQuery 获取变量

自执行函数 jquery 与 JavaScript 的区别

从回调函数 -JQuery 获取返回值

一个接一个地执行函数 JQUERY