記事/オブジェクトごとにクラスを表示/非表示にする方法は？

Question

私は学校でのレスポンシブなデザインの実践のためにこのかなり基本的なサイト（http://cimoril.dothome.co.kr/greece/aegean.html）を持っており、記事ごとにonClickイベントを追加したいと思います。

クラスごとではなく、記事ごとにそれを動作させるにはどうすればよいですか？たとえば、記事の1つをクリックすると、特定の記事のクラスだけが表示され、すべての記事は表示されません。最初のイメージをクリックすると、.textクラスを持つすべての記事も表示されます。

JS/jQueryの学習を始めたので、実際にはうまく説明できず、しばらくの間グーグルで答えを見つけることができませんでした。事前にお詫びします。

コードスニペット：あなたはクリックイベントが発生した上で要素を取得するためにクリックイベント内thisリファレンスを使用することができます

$(".text").hide(); 
 

 
$("article").on("click", function() { 
 
    $("p.text").show(); 
 
}); 
 

 

 
$("article").on("mouseleave", function() { 
 
    $("p.text").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section> 
 
    <article> 
 
    <div class="bg bg1"> 
 
     <span>Aghios Efstratios</span> 
 
     <p class="text text1">Aghios Efstratios is a small Greek island southwest of Lemnos and northwest of Lesbos.</p> 
 
    </div> 
 
    </article> 
 

 
    <article> 
 
    <div class="bg bg2"> 
 
     <span>Chios</span> 
 
     <p class="text text2">Chios is the fifth largest of the Greek islands, situated in the Aegean Sea</p> 
 
    </div> 
 
    </article> 
 
</section>

Answer 1

。次に、その記事要素内の段落を取得することができます。

サイドノートでは、あまり多くのハンドブックは必要ありません。$(document).ready()ハンドラ。特定の理由がない限り、すべてを1つにまとめることができます。

$(".text").hide(); 
 

 
$("article").click(function() { 
 
    $(this).find("p.text").show(); 
 
}); 
 

 
$("article").mouseleave(function() { 
 
    $(this).find("p.text").hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <article> 
 
    <div class="bg bg1"> 
 
     <span>Aghios Efstratios</span> 
 
     <p class="text text1">Aghios Efstratios is a small Greek island southwest of Lemnos and northwest of Lesbos.</p> 
 
    </div> 
 
    </article> 
 

 
    <article> 
 
    <div class="bg bg2"> 
 
     <span>Chios</span> 
 
     <p class="text text2">Chios is the fifth largest of the Greek islands, situated in the Aegean Sea</p> 
 
    </div> 
 
    </article> 
 
    <section>