Применение класса Jquery ко всем дочерним элементам только одного элемента

0

Я пытаюсь получить больше практики 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>

Я не знаю, почему он не работает. Я думаю, это просто то, что я сейчас не вижу. благодаря

  • 0
    Ваш p не является $(this).children('p').removeClass().addClass('large'); ваших h2 элементов, поэтому $(this).children('p').removeClass().addClass('large'); не собирается ничего возвращать.
  • 1
    У H2 нет детей?
Показать ещё 1 комментарий

3 ответа

0
Лучший ответ

Элемент h2 не имеет children() элементов children(), поэтому он не влияет на элементы. Вместо этого попробуйте:

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

Демо-версия JS Fiddle.

Хотя я бы предложил использовать toggleClass():

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

Демо-версия JS Fiddle.

Или, если вы хотите иметь только один раздел "расширенный" за раз, сначала удалите large имя класса из всех элементов, а затем добавьте его только к элементу с щелчком:

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

Демо-версия JS Fiddle.

  • 0
    Ваш последний код именно то, что я искал. У меня просто еще один быстрый вопрос. Код работает в JS Fiddle, но не тогда, когда я запускаю его в Chrome или что-то еще. Просто любопытно, если я должен что-то изменить или что-то еще. Благодарю.
  • 0
    Нет, это должно работать напрямую. Есть ли какие-либо ошибки в консоли JavaScript вашего браузера (F12 в большинстве браузеров)? Вы включили JQuery? Вы завернули его в обработчик $(document).ready(/* your code here */) ?
0

Пункты не являются дочерними элементами тега h2, но siblings Также вы не удаляете большой класс вообще.

$('h2').click(function()
  {
    $(this).addClass('h2Color');
    $(this).siblings('p').addClass('large');
  });
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 не может иметь абзац в качестве своего дочернего $(this).children('p').

Ещё вопросы

Сообщество Overcoder
Наверх
Меню