如何處理jquery中的點擊

我目前擁有使用mouseenter和mouseleave的jQuery函數。目前這給了我期望的效果，一旦鼠標離開div，一切都恢復正常。我試圖複製這個，但使用點擊，我正在讀on（）和off（），但我不認爲這可以使用。以下是我的代碼。如何處理jquery中的點擊

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>

來源

2015-11-26 Joe W

您可以共享標記或嘗試FIDDLE場景。 – Mayank

添加了標記對不起有安靜的升技 –

旁註：您在某些地方使用'jQuery'標識符，而在其他地方使用'$'。一致性是關鍵。 – George

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

來源

2015-11-26 08:54:34

謝謝，用.off代替mouseleave會有同樣的效果嗎？ –

jQuery（「。leftpara」）on（「click」，function（）{你忘了這裏 – Rickert

@Joe我相信它不是因爲.off會刪除使用.on（）附加的事件處理程序，我也認爲你可以在用戶點擊某物後留下mouseleave，然後在該點擊事件中做點事情，然後將光標指向其他元素，mouseleave會觸發。 –

我設法通過在每個函數中添加計數器來獲得所需的效果。我首先初始化計數器變量，然後在點擊觸發器中添加一個。然後我有一個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; 
    } 
    }); 
})();

來源

2015-11-26 11:11:37

如何處理jquery中的點擊

回答

相關問題