Question

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

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

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

我也在使用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>

Answer 1

从你的头衔来看，试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery还有可选的回调函数。例如......

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

Answer 2

不知道你到底发生了什么，但是如果你想要一个按钮可以执行两个功能，只运行功能1后运行功能2，你可以这样做：

<强> 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;
}

<强> DEMO

Answer 3

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

<强> HTML

<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/

Answer 4

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

假设您有两个处理程序， f 和 g ，并且希望确保它们以已知且固定的顺序执行，然后将它们封装起来：< / p>

$("...").click(function(event){
  f(event);
  g(event);
});

通过这种方式（从jQuery的角度来看）只有一个处理程序，它以指定的顺序调用 f 和 g 。

是否可以使一个html按钮执行2个不同的jquery函数，第二个函数在第一个完成后启动

4 个答案: