0

JQuery の使用方法を学習しようとしていますが、問題が発生しています。1 つの機能をトリガーすると、他の無関係な機能の効果が引き起こされますが、その理由はわかりません。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。の子のみが必要な場合は、コンテキストを追加します。h2pbox1

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

pまた、他の人が述べているように、最初のクリックハンドラーはすべての要素に割り当てられます。

于 2013-01-11T19:44:50.600 に答える