クリックイベントで使用するために.hover（）の変数に要素のIDを割り当てます。

Question

私のページには12個の要素がありますが（以下では3つしか書かれていません）。一方がクリックされると、もう一方の11は消えます（ 'spinOut'というアニメーションを使用）。個々の要素のクリックで実行するコードを書く代わりに、ホバリング時に$test変数に割り当てられる要素のIDを入力し、次に$test（要素がホバリングされている）をクリックすると、実行するコードその要素のために。だから、$testに適用される1ブロックのコードを書くだけでよいのです。つまり、クリックされた要素に適用されます。

私は、変数$ testに.hover（）関数の中で値を割り当てようとしています。私は人々が似たような問題を抱えている多くの記事を見つけましたが、問題を解決した解決策のどれもが私を助けませんでした。私は$test変数を.hover（）関数の中にどのように割り当てて、それを外部で使うことができるか知りたいです。

$(document).ready(function() { 
    var $test; 

    $("#M").hover(function() { 
     $test = "#M"; 
    }); 
    $("#N").hover(function() { 
     $test = "#N"; 
    }); 
    $("#O").hover(function() { 
     $test = "#O"; 
    }); 

    //When I define variable value here it works 
    $($test).click(function() { 
     $(".pageItem:not("+$test+")").addClass("spinOut"); 
    }); 
}); 

Answer 1

ここではどのように動作させるのですか。私のページの12個の要素は、 ".pageItem"クラスのすべての部分です。 $().clickに特定の要素を指定する必要はありません。クリックされた.pageItemでコードを実行してから、関数内で$test変数を使用して、クリックされた.pageItemをターゲットにします。コードは、最後にホバリングした要素に適用されます。最初にホバリングしないで要素の1つをクリックすることは不可能です。

$("#M").hover(function() { 
    $test = "#M"; 
}); 
$("#N").hover(function() { 
    $test = "#N"; 
}); 
$("#O").hover(function() { 
    $test = "#O"; 
}); 
$(.pageItem).click(function() { 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
}); 

しかし、私が必要としていた方法は、はるかに簡単で論理的な方法があります。 $testのIDに.pageItemのIDを書き込むのではなく、最後に私がクリックしたものを指定するために使用しました。$(this).attr("id")に$testを割り当てます。次のようにclick（）関数を使用します。

$(.pageItem).click(function() { 
    $test = $(this).attr("id"); 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
}); 

Answer 2

このようにすることはできません。トリガーを設定するときに、要素が存在しない（空の場合）ためです。それを行う1つの方法：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      $test = "#M"; 
     }); 

     $(document).on('click', $test, (function() { 
      if ($test) 
       console.log($test); 
     }); 
}); 

EDIT：それを行うための別の方法：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      // for future use if needed 
      $test = "#M"; 

      $(this).unbind('click').click(function() { 
       console.log($test); 
      }); 
     }); 
}); 

Answer 3

$(document).ready(function() { 
    $("#M").hover(function() { 
     $test = "#M"; 
     eventClick($test, function() { console.log($test); }); 
    }); 

    var eventClick=function(ele, f) { 
     $(ele).unbind('click'); 
     $(ele).click(f); 
    }; 

}); 

Answer 4

あなただけがきた要素にクリックハンドラを添付したいようですね終わった。それを行う方法はたくさんあります。ここでは一つだ：

技術

$(document).ready(function() { 
 
     $('.clickable').on('mouseenter', function() { 
 
      $(this).data('can-click', true); 
 
     }).on('mouseleave', function() { 
 
      $(this).data('can-click', false); 
 
     }); 
 
     $(document).on('click', function (e) { 
 
      var currentTarget = $(e.target); 
 
      if (currentTarget.data('can-click')) { 
 
       console.log('clicked'); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="M" class="clickable">M</div> 
 
<div id="O">O</div>

、これは、文書全体の任意のクリックイベントに耳を傾け、だけホバーされているものに反応します。それは、上に乗ったときにのみクリック可能な「クリック可能」な要素をマークすることによって機能します。ユーザーがクリックすると、コードはそのマークをチェックしてからコードを続行します。

Answer 5

クリック可能なアイテムが「ボタン」タイプの「入力」であると仮定すると、このようなことが可能です。

$(document).ready(function() { 
    var $test = ''; 
    $("#M").hover(function() { 
     $test = "#M"; 
    }); 

    $("input[type=button]").on('click', function (e) { 
     console.log($test); 
    }); 
}); 

私の前提が正しくない場合は、この解決策が機能しないか、変更する必要がある可能性があります。

ちょっと考えて