0

我正在尝试学习如何使用 JQuery，但遇到了问题。触发一个功能会触发其他无关功能的影响，我不知道为什么。当我单击 box2 元素时，为什么 box1 的效果也会触发？

单击“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>
4

3 回答 3

2

您为所有段落分配了一个点击处理程序，并且两个框中都有一个段落：

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

将其更改为：

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

或者

$("#box1").find('p').click(function()
于 2013-01-11T19:43:18.913 回答
1

您不只是单击，而是单击内部box2的段落，这就是它触发第一个处理程序的原因。pbox2

你可以改变

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

到

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

以避免这个问题。

于 2013-01-11T19:44:27.977 回答
1

您的box1点击处理程序正在更新所有h1、h2和p元素。如果您只想要box1.

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

此外，正如其他人所提到的，您的第一个点击处理程序被分配给所有p元素。

于 2013-01-11T19:44:50.600 回答