JQuery Скрыть/Показать один, не все

Мне нужна помощь, пытаясь понять, почему это только скроет и покажет все элементы моего скрытого класса. Я пробовал:JQuery Скрыть/Показать один, не все

$("h2 > p").removeClass("hidden");

И это просто не сработает, когда я его использую. Я также пробовал:

$(this).find('p').removeClass("hidden");

И это тоже не сработает. Поскольку это для назначения, я не могу редактировать CSS или HTML напрямую, и это введение в JQuery, поэтому фактический JavaScript и JQuery не должны быть продвинуты вообще. Я просто не понимаю, почему это не сработает ни с одним из двух примеров, которые я показал выше. Все, что мне нужно, это один из ответов на показ, а не каждый.

$(document).ready(function() { 
    $("h2").on('mouseover', function() { 
     $("p").removeClass("hidden"); 
    }); 
    $("h2").on('mouseout', function() { 
     $("p").addClass("hidden"); 
    }); 
}); // end ready

Это часть HTML, включающая классы, которые я пытаюсь добавить и удалить.

<body> 
<section> 
    <h1>jQuery FAQs</h1> 
    <ul id="faq_rollovers"> 
     <li><h2>What is jQuery?</h2> 
      <p class="hidden">jQuery is a library of the JavaScript functions 
      that you're most likely to need as you develop web sites.</p> 
     </li> 
     <li><h2>Why is jQuery becoming so popular?</h2> 
      <p class="hidden">Three reasons: It's free; It lets you get more done 
      in less time; All of its functions are cross-browser compatible.</p> 
     </li> 
     <li><h2>Which is harder to learn: jQuery or JavaScript?</h2> 
      <p class="hidden">For most functions, jQuery is significantly easier to learn 
      and use than JavaScript. But remember that jQuery is JavaScript.</p> 
     </li> 
    </ul>   
</section>

Примечание: Поскольку р элемент скрыт, и вы не можете на самом деле парить над ним, я решил использовать элемент h2 как селектор наведении курсора мыши.

источник

2015-11-23 Hercell Yutiko

какие стили делает класс 'hidden' добавить? вы пробовали '$ (" li p.hidden "). show()'? – Adunahay

Вы можете сделать это в jQuery только с одним обработчиком вместо двух или даже без какого-либо JavaScript вообще с помощью CSS. Дайте мне знать, если вы хотите знать, как это сделать. –

Ваша проблема заключается в том, что р тег не внутри h2 тега. Вы можете сделать:

$(this).siblings("p").removeClass("hidden");

Или:

$(this).parent().find("p").removeClass("hidden");

источник

2015-11-23 20:06:04 juvian

Большое вам спасибо! Я всегда забываю о родных и родителях (даже в CSS). –

Try поиск в другой h2 для р тега:

$(document).ready(function() { 
    $("h2").on('mouseover', function() { 
     $(this).siblings("p").removeClass("hidden"); 
    }); 
    $("h2").on('mouseout', function() { 
     $(this).siblings("p").addClass("hidden"); 
    }); 
}); // end ready

источник

2015-11-23 20:05:22 Macmee

Спасибо! Это помогло мне! Я всегда забываю о родителях, братьях и сестрах и детях! –

$("h2").hover(function() { 
 
    $(this).next().removeClass("hidden"); 
 
}, function() { 
 
    $(this).next().addClass("hidden"); 
 
});

источник

2015-11-23 20:36:40

и вы можете использовать функцию .hover(). –

JQuery Скрыть/Показать один, не все

ответ

Смежные вопросы