Javascript 如何在jquery中处理点击

我目前拥有使用mouseenter和mouseleave的jQuery函数。这给了我想要的效果，当鼠标离开一个div时，一切都会恢复正常。我试图复制这一点，但是使用click，我阅读了关于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

一些文本
Anthony&；
托马斯

一些文本
获奖


交付
展开
过程

在以下方面的经验
许多市场

jquery单击事件的示例如下

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

或

或

---

通过在每个函数中添加一个计数器，我成功地获得了想要的效果。我首先初始化计数器变量，然后在click触发器中添加一个。然后我有一个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;
    }
  });
})();

---

您可以共享标记或尝试修改场景。添加标记很抱歉存在安静的abitSidenote：您在某些位置使用

jQuery

标识符，在其他位置使用

$

。一致性是关键。@George感谢tipcombine on click和mouse leave事件。谢谢，使用.off而不是mouseleave是否同样有效？jQuery（“.leftpara”）on（“click”，function（）{您忘记了一个。here@Joe我相信这不是因为.off将删除使用.on（）附加的事件处理程序。我还认为，用户单击某个内容后，您可以保持mouseleave不变，然后在该单击事件中执行某项操作，然后他将光标指向其他元素，mouseleave将触发。@Rickdep谢谢：D

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

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

(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;
    }
  });
})();