Использование this с селекторами jQuery
У меня есть HTML-код, который выглядит так:
<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>
Используя CSS, я устанавливаю тег p на display:none;. Я хочу использовать jQuery для отображения или скрытия тега p при щелчке по anchor, но у меня возникли проблемы с селектором родственников.
Просто пытаясь заставить селектор работать, я попробовал:
$("a.question").click(function () {
$(this + " ~ p").css("background-color", "red");
});
чтобы проверить это. Похоже, что родственный селектор нельзя так использовать, и, поскольку я совершенно новичок в jQuery, я не знаю подходящих средств, чтобы это произошло.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
$(this).next("p").css("...")
"p" выше не является обязательным, если вам просто нужен следующий непробельный узел в DOM.
Попробуйте использовать:
$(this).siblings('p').css()
lazyweb - это здорово, не так ли? :) О, и имейте в виду, что он сделает это с тегом каждый 'p' в вашем <li>, если вы добавите больше.
Не горький? Не волнуйтесь, мой комментарий неконструктивен.
(5 лет спустя ...) Чтобы наверстать упущенное, Бен, я подписался на NSScreencasts около 6 месяцев назад и получил довольно много этого ;-).
I want to use jQuery to display or hide the 'p' tag when the anchor is clicked
Поскольку вы упомянули, что хотите переключать тег 'p' при нажатии привязки, я бы сделал:
$("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
});
Ах, мне было интересно, что такое jQuery-версия использования события щелчка. Спасибо!
Привет, спасибо, это избавило меня от необходимости думать дальше! В итоге я выбрал slideToggle () вместо show (), в основном потому, что хочу, чтобы люди думали, что я крутой. ;)
Прекрасно, это прекрасно (и намного быстрее, чем довольно бесплодный поиск в Google). Спасибо!