0

I'm trying to get more JQuery practice. I have an HTML page that consists of headings and paragraphs. When the user clicks on the heading, the paragraph directly below should be enlarged. Also, the heading should change its background color to #CCCCCC. Finally, only one paragraph and heading should be enlarged and colored respectively. So far I've tried:

09.js

    $(document).ready(function(){
    $('h2').click(function()
  {
    $(this).addClass('h2Color');
    $(this).children('p').removeClass().addClass('large');
  });
});

09.css

  .h2Color{
  background-color: #CCCCCC
  }

 .large {
 font-size: 3.0em;
 }

09.html

    <!DOCTYPE html>
 <html lang="en">
<head>
<title>Biography of Mark Twain</title>
<meta charset="utf-8">
<link rel="stylesheet" href="09.css" type="text/css" />

<script src="jquery.js"> </script>
<script src="09.js"> </script>
</head>
<body>
<h3>Title Of Page</h3>
<h1>Random H1 Element</h1>

<div>
<p>On then sake home is am leaf. Of suspicion do departure at extremely he believing. Do know said mind do rent they oh hope of. General enquire picture letters garrets on offices of no on. Say one hearing between excited evening all inhabit thought you. Style begin mr heard by in music tried do. To unreserved projection no introduced invitation. 
</p>
</div>

<div>
<h2>Marilyn Monroe</h2>
<p>I have feelings too. I am still human. All I want is to be loved, for myself and for     my talent.
</p>
<p> 
I'm selfish, impatient, and a little insecure. I make mistakes, I'm out of control, and at times hard to handle. But if you can't handle me at my worst, then you sure don't deserve me at my best.
  </p>
 </div>
 <div>
<h2>Richard Dawkins</h2>
<p>I am against religion because it teaches us to be satisfied with not understanding the world.
</p>
<p>Personally, I rather look forward to a computer program winning the world chess   championship. Humanity needs a lesson in humility.
 </p>

</div>

<div>
<h2 >John F. Kennedy</h2>
<p>
Let every nation know, whether it wishes us well or ill, that we shall pay any price, bear any burden, meet any hardship, support any friend, oppose any foe to assure the survival and the success of liberty.
</p>
</div>

</body>
</html>

I don't know why it's not working. I guess it's just something that I'm not seeing right now. Thanks

4

3 に答える 3

0

デモ1

  $('h2').click(function () {
      $(this).addClass('h2Color');
      $(this).next('p').removeClass().addClass('large');
  });

.next()1 つの段落のみを拡大する必要があるため、 を使用します。

h2タグに関連するすべてのパラグラフを拡大したい場合は、これを使用します

デモ 2

  $('h2').click(function () {
      $(this).addClass('h2Color');
      $(this).parent('div').find('p').removeClass().addClass('large');
  });

$(this).children('p')h2段落を子として持つことができないため、間違っています。

于 2013-11-14T18:28:11.203 に答える
0

段落は h2 タグの子ではありませsiblings んが、大きなクラスをまったく削除していません。

$('h2').click(function()
  {
    $(this).addClass('h2Color');
    $(this).siblings('p').addClass('large');
  });
于 2013-11-14T18:28:36.093 に答える
0

このh2要素には がないchildren()ため、どの要素にも影響しません。代わりに試してください：

$('h2').click(function() {
    $(this).addClass('h2Color');
    $(this).closest('div').find('p').removeClass().addClass('large');
});

JS フィドルのデモ。

私は使用することをお勧めしますがtoggleClass()：

$('h2').click(function() {
    $(this).addClass('h2Color');
    $(this).closest('div').find('p').toggleClass('large');
});

JS フィドルのデモ。

または、 「拡大」セクションを一度に1 つだけにしたい場合は、最初largeにすべての要素から class-name を削除してから、クリックした要素だけに追加します。

$('h2').click(function () {
    $('.large').removeClass('large');
    $(this).addClass('h2Color').closest('div').find('p').addClass('large');
});

JS フィドルのデモ。

于 2013-11-14T18:29:03.237 に答える