如何处理 jquery 中的点击

Question

我目前有 jQuery 个使用 mouseenter 和 mouseleave 的函数。这目前给了我想要的效果，一旦鼠标离开 div，一切都会恢复正常。我正在尝试复制它但不是使用单击，我正在阅读有关 on() 和 off() 的信息，但我认为这不能使用。下面是我的代码。

jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery('#home-grid-one-two').mouseenter(function(){ 
$('#home-grid-two-one').css({
        'visibility': 'hidden' 
    });
$('#home-grid-two-two').css({
        'visibility': 'hidden' 
    });
$('#home-grid-two-three').hide();
$('#home-grid-three-three').hide();
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
        });
         jQuery('#home-grid-one-two').mouseleave(function(){
            $('#home-grid-two-one').css({
        'visibility': 'visible' 
    });
$('#home-grid-two-two').css({
        'visibility': 'visible' 
    });
    $('#home-grid-three-two').show();
            $('#home-grid-two-one').show();
            $('#home-grid-three-one').show();
            $('#home-grid-two-three').show();
            $('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();

HTML

<div id="home-grid-one-one" class="home-grid"> 
<div class="page" title="Page 2">
<p class="leftpara"> Some Text.</p>
</div>


<div id="home-grid-one-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Anthony &amp;
Thomas</p>

</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-one-three" class="home-grid"> <div class="page" title="Page 2">
<p class="rightpara"> Some Text.</p>

</div>
<div id="home-grid-two-one" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Award winning</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-two-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;"><strong>Proven
to deliver</strong></p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-two-three" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Development
Process</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-three-one" class="home-grid"> <div class="page" title="Page 2"></div>
<div class="page" title="Page 2"></div>
<div id="home-grid-three-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p class="ptagexp" style="text-align: center;">Experience in
many markets</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-three-three" class="home-grid"> <div class="page" title="Page 2"></div>

Answer 1

jquery点击事件的例子如下

jQuery(".leftpara").click(function(){
  //do something here
});

或

jQuery(".leftpara").on("click",function(){
  //do something here
});

或

jQuery(document).on("click",".leftpara",function(){
   //do something here
});

Answer 2

我设法通过在每个函数中添加一个计数器来获得预期的效果。我首先初始化计数器变量，然后在点击触发器中添加一个。然后我有一个 IF 语句，所以当点击次数达到 2 时，它将值更改回默认值并重置计数器。下面是一个例子

(function() {
  var count = 0;

  jQuery('#home-grid-one-two').click(function () {
    count += 1;
    jQuery('#home-grid-two-one').css({
        'visibility': 'hidden' 
    });
jQuery('#home-grid-two-two').css({
        'visibility': 'hidden' 
    });
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image',   'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
        'background-size': 'cover' 
    });
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
        'margin-top': '-450px' 
    });
jQuery('#home-grid-three-two').css({
        'margin-top': '-420px' 
    });
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();


    if (count == 2) {
     jQuery('#home-grid-two-one').css({
        'visibility': 'visible' 
    });
jQuery('#home-grid-two-two').css({
        'visibility': 'visible' 
    });
    jQuery('#home-grid-three-two').show();
    jQuery('#home-grid-three-two').css('background-image',   'none');
    jQuery('#home-grid-two-two').css({
        'margin-top': '0px' 
    });
jQuery('#home-grid-three-two').css({
        'margin-top': '0px' 
    });
            jQuery('#home-grid-two-one').show();
            jQuery('#home-grid-three-one').show();
            jQuery('#home-grid-two-three').show();
            jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
    }
  });
})();

如何处理 jquery 中的点击

How to handle clicks in jquery

javascript

jquery

onclick