单击一对元素时发生的事件

Event when a pair of elements are clicked

本文关键字：事件 元素 单击      更新时间：2023-09-26

我有5个具有类.home和唯一id的元素，以及一个具有类.btn1的按钮。如果在.btn1之后单击.home，反之亦然，则应执行一个功能。我不知道我应该使用什么jQuery方法。

试试这个：

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

我不认为有什么特定的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>

只需计算事件发生的次数，并存储事件。使用Array可以很容易地做到这一点：

//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")});
相关文章：