將Jquery類應用於僅一個元素的所有子級

Question

我正在嘗試獲得更多的JQuery實踐。 我有一個包含標題和段落的HTML頁面。 當用戶單擊標題時，正下方的段落應放大。 此外，標題應將其背景顏色更改為#CCCCCC。 最后，只有一個段落和標題應分別放大和着色。 到目前為止，我已經嘗試過：

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>

我不知道為什么它不起作用。 我想這只是我現在看不到的東西。 謝謝

Answer 1

演示1

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

使用.next() ，因為您只想放大一個段落

如果要放大與h2標簽相關的所有參數，請使用此

演示2

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

$(this).children('p')是錯誤的，因為h2不能將段落作為其子級。

Answer 2

這些段落不是h2標記的子代，而是siblings而且，您根本不會刪除大型類。

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

Answer 3

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小提琴演示。

或者，如果您一次只希望有一個 “放大”部分，請首先從所有元素中刪除large類名，然后將其僅添加到單擊的元素中：

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

JS小提琴演示。

將Jquery類應用於僅一個元素的所有子級

問題描述

3 個解決方案

解決方案1
0 2013-11-14 18:28:11

解決方案2
0 2013-11-14 18:28:36

解決方案3
0 已采納 2013-11-14 18:29:03

將Jquery類應用於僅一個元素的所有子級

問題描述

3 個解決方案

解決方案1 0 2013-11-14 18:28:11

解決方案2 0 2013-11-14 18:28:36

解決方案3 0 已采納 2013-11-14 18:29:03

解決方案1
0 2013-11-14 18:28:11

解決方案2
0 2013-11-14 18:28:36

解決方案3
0 已采納 2013-11-14 18:29:03