Usando “isto” com jQuery seletores
-
05-07-2019 - |
Pergunta
Eu tenho alguns HTML que se parece com isso:
<ul class="faq">
<li class="open">
<a class="question" href="">This is my question?</a>
<p>Of course you can, it will be awesome. </p>
</li>
</ul>
Usando CSS Eu estou definindo a tag 'p' para display: none ;. Eu quero usar jQuery para exibir ou ocultar a tag 'p' quando a âncora é clicado, mas eu estou tendo alguns problemas com o seletor irmão.
Apenas tentando obter o trabalho seletor, eu tentei:
$("a.question").click(function () {
$(this + " ~ p").css("background-color", "red");
});
para testá-lo. Aparentemente, o seletor irmão não pode realmente ser usado como esse, e como eu sou completamente novo para jQuery Eu não sei os meios adequados para que isso aconteça.
Agradecemos antecipadamente!
Solução
Tente usar:
$(this).siblings('p').css()
Outras dicas
$(this).next("p").css("...")
o "p" acima é opcional, se você quiser apenas o próximo nó não-espaço em branco no DOM.
Eu quero usar jQuery para exibir ou ocultar a tag 'p' quando a âncora é clicada
Uma vez que você mencionou que você gostaria de alternar a tag 'p' quando a âncora é clicado, eu faria:
$("a.question").click(function (event) {
$(this).siblings('p').show(); //toggle the p tags that are siblings to the clicked element
event.preventDefault(); //stop the browser from following the link
});