web-dev-qa-db-ja.com

jthisセレクターで「this」を使用する

次のような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に完全に慣れていないので、それを実現するための適切な手段がわかりません。

javascriptjquerycss-selectors
24
ironkeith

使ってみてください：

$(this).siblings('p').css()
37
swilliams
$(this).next("p").css("...")

上記の "p"は、DOM内の次の非空白ノードが必要な場合はオプションです。

14
Ben Scheirman

アンカーをクリックしたときに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
  });
7
Gabe Hollombe