这是我的代码

Question

我正在尝试学习如何使用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>

Answer 1

您有一个分配给所有段落的点击处理程序，两个框中都有一个段落：

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

将其更改为：

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

或

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

Answer 2

您不是仅点击box2，而是点击p内的box2段，这就是它触发第一个处理程序的原因。

你可以改变

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

到

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

避免这个问题。

Answer 3

您的box1点击处理程序正在更新所有h1，h2和p元素。如果您只想要box1的孩子，请添加一些上下文。

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

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

不相关的JQuery函数相互影响

这是我的代码

3 个答案: