我想學習如何使用JQuery，我遇到了問題。觸發一個功能是設置其他無關功能的影響，我不知道爲什麼。當我點擊box2元素時，爲什麼box1的效果也會啓動？無關的JQuery函數影響彼此

當單擊「p」元素時，box1應該展開爲100％寬度。當「box2」被點擊時，它應該擴展到400px高度。問題是當我點擊box2時，box1也在改變。

注意：這只是一個練習，所以不需要擔心在這裏完美的做事。試圖找出這個怪癖。謝謝！

這裏是我的代碼

<html> 
<head> 
<style> 
    *{ padding:0px; margin:0px;} 
    p { font-family:Verdana, Geneva, sans-serif; font-size:40px; font-weight:bold; color:#fff;} 
    #box1 { background-color:#003366; height:60px; width:350px; padding:15px;} 
    #box2 { background-color:red; height:60px; width:350px; padding:15px;} 
    .center{text-align:center;} 
    .red{color:red;} 
</style> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script> 
$(document).ready(function() 
{ 
<!-----------------function p onclick---------------> 
    $("p").click(function() 
    { 
    $("#box1").animate({ width: '100%'}); 

    $("h1,h2,p").addClass("center"); 

    }); 

<!-----------------function box2 onclick---------------> 
    $("#box2").click(function() 
    { 
     $("#box2").animate({ height: '400px'}); 
    }); 

});<!--end document.ready JQUERY--> 

</script> 

</head> 
<body> 
    <div id="box1"><p>Test It</p></div> 
    <h1>Just some words here.</h1> 
    <div id="box2"><p>Test It</p></div> 
</body> 
</html>

來源

2013-01-11 ThisBetterWork

你有一個p元素，在＃box2元素中。 p元素和＃box2元素都有點擊事件。當你點擊p元素時，＃box2上的點擊事件也會觸發。因此你的jQuery功能是相關的。使你的第一個功能更具體。 –

已分配給所有段落的點擊處理程序，並有兩個箱子一個段落：

$("p").click(function()

修改成：

$("#box1").click(function()

或

$("#box1").find('p').click(function()

來源

2013-01-11 19:43:18 Syon

哦，嘿。易於修復，但我很驚訝....我不認爲點擊框2會觸發分配給「p」的效果。（我小心翼翼地不要擊中box2中的「p」），但感謝您的幫助。 – ThisBetterWork

您不要點擊只是box2，您點擊box2中的段落p，這就是爲什麼它也會觸發第一個處理程序。

你可以改變

$("p").click(function()

到

$("p").not('#box2 p').click(function()

來避免這個問題。

來源

2013-01-11 19:44:27

您的box1點擊處理程序正在更新所有h1,h2和p元素。如果您只想要box1的孩子，請添加一些上下文。

$("h1,h2,p", "#box1").addClass("center");

而且，正如其他人所說，你的第一個點擊處理程序被分配給所有p元素。

來源

2013-01-11 19:44:50 jrummell

無關的JQuery函數影響彼此

這裏是我的代碼

回答

相關問題