javascript - 在 jQuery 选择器中使用“this”

Question

我有一些看起来像这样的 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;. 我想在单击p时使用 jQuery 来显示或隐藏标签anchor，但是我在使用同级选择器时遇到了一些问题。

只是想让选择器工作，我试过：

$("a.question").click(function () {
    $(this + " ~ p").css("background-color", "red");
});

来测试一下。看起来，兄弟选择器不能真正那样使用，而且由于我对 jQuery 完全陌生，我不知道实现这一点的适当方法。

Answer 1

尝试使用：

$(this).siblings('p').css()

Answer 2

$(this).next("p").css("...")

如果您只想要 DOM 中的下一个非空白节点，则上面的“p”是可选的。

Answer 3

单击锚点时，我想使用 jQuery 显示或隐藏“p”标签

既然您提到您想在单击锚点时切换“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
  });