要素のペアがクリックされたときのイベント

クラス.homeの5つの要素と一意のIDと、.btn1のボタンがあります。 .btn1の後に.homeをクリックすると、その逆の場合は、関数を実行する必要があります。私はどのようなjQueryメソッドを使うべきか分かりません。要素のペアがクリックされたときのイベント

出典

2016-08-28 Lukas Baliūnas

あなたは、実行可能デモ/スニペットまたは[JSFiddle]（https://jsfiddle.net/）を共有することはできますか？ [最小限で完全で検証可能なexample_を作成する]（http://stackoverflow.com/help/mcve） – Rayon

これを試してみてください：

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

出典

2016-08-28 17:41:15 Ehsan

イベントが発生した回数をカウントし、イベントを保存します。これは配列で簡単に行うことができます。

//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")});

出典

2016-08-28 17:25:55

あなたの答えを理解するために、簡単な例をスニペットで入力できますか？ –

@ LukasBaliūnas：例は自己説明です。あなたが正確に理解できないことを説明してください –

具体的な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>

出典

2016-08-28 17:32:40

要素のペアがクリックされたときのイベント

答えて

関連する問題