单击一对元素时的事件

Question

我有 5 个带有 class .home 和唯一 ID 的元素，以及一个带有 class .btn1 的按钮。当在 .btn1 之后单击 .home 时，反之亦然，应该执行一个函数。我不知道我应该使用什么 jQuery 方法。

Answer 1

简单地计算事件发生的次数，并存储事件。这可以用数组轻松完成：

//create an array to store events
events=[];
//create a handler function
function handler(event){
//add the event to our array
events.push(event);
if(events.length==2){
//two events fired:
//first event:
a=events[0];
//second:
b=events[1];
//do whatever
}
}
//add an eventlistener that calls our handler and passes 'documentclick'   
 document.addEventListener("documentclick",function(){handler("click")});

Answer 2

我认为没有特定的 jQuery 技巧。

为什么不使用类来存储状态？

        $(function() {

            $(".home").click(function () {
                $(this).addClass("active");
                if ($(".btn1").hasClass("active")) {
                    console.log("Doing something");
                }

            });


            $(".btn1").click(function () {
                        $(this).addClass("active");
                        if ($(".home").hasClass("active")) {
                            console.log("Doing something");
                        }
                    }
            );
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'home'>
        Home
    </div>
    <div>
        Stuff
    </div>
    <button class = 'btn1' >Button</button>
    <div class = 'home'>
        Home
    </div>
    <div>
        Stuff
    </div>
    <div class = 'home'>
        Home
    </div>
    <div>
        Stuff
    </div>
    <div class = 'home'>
        Home
    </div>
    <div>
        Stuff
    </div>

Answer 3

试试这个：

<!DOCTYPE html>
<html>
<head>
    <style>
        .active {
            background-color: skyblue;
        }
    </style>
</head>
    <body>
        <div class="home">I am Div1</div>
        <div class="home">I am Div2</div>
        <div class="home">I am Div3</div>
        <div class="home">I am Div4</div>
        <div class="home">I am Div5</div>
        <button class="btn">Run</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var divReady = false;
            var btnReady = false;
            $(".btn").on("click",function(){
                btnReady = true;
                $(this).addClass("active");
                if (divReady)
                    fun();
            })
            $("div").on("click",function(){
                divReady = true;
                $("div").removeClass("active");
                $(this).addClass("active");
                if (btnReady)
                    fun();
            })
            
            function fun() {
                alert("I am working!")
                $(".btn,div").removeClass("active");
                btnReady = false;
                divReady = false;
            }
            
        })
    </script>
    </body>
</html>

单击一对元素时的事件

Event when a pair of elements are clicked

javascript

jquery

jquery-events