JQuery：個々の段落を非表示にするには、ここをクリック

Question

クリックして詳細を表示するオプション付きの要約段落を持つサイトを作成しようとしています。私はこのコードでこれを行なった。

$(document).ready(function() { 
$("#here").hide(); 
$("#show").click(function() { 
    $("#here").show(); 
    $("#icond").hide(); 
}); 

$("#hide").click(function() { 
    $("#here").hide(); 
    $("#icond").show(); 
}); 

私の問題は、さまざまなdiv/p要素を持つページ全体で何度もこれを実行できるようにすることです。

クラスでこれを実行しようとしたとき、同時に開くか閉じることになりました。私が知っている唯一の解決策は、各idの関数を再入力することです。

別の方法がありますか？

ありがとうございます！

https://jsfiddle.net/58roy7hg/

Answer 1

あなたはthisキーワードを使用して、あなたは上記の答えが示唆するように表示し、非表示にしたい特定の要素をターゲットにtree traversalを使用する必要があります。私があなたに与えるいくつかのヒントは、

1. document.readyを複数回避けてください。
2. .clickの代わりに.onを使用することをお勧めします。より汎用性が高いため、動的に追加された要素をドリルダウンすることができます。
3. idの使用を避けてください。これは、ページ全体にわたって繰り返されない要素（ナビゲーションバーなど）に使用されます。 idのほとんどはclassに置き換えることができます。

このサンプルを試してみてください：jsfiddle

私はすぐにあなたが望むようにあなたがそれを目的に再できるよう、お見せするために（私自身のマークアップ）サンプルを作ったが、私は間違いなくチェックアウトをお勧めします感情を得るためのドキュメンテーション。

Answer 2

ただ、特定のイベント・ソース要素を使用するためにthis変数を使用します。他のすべての要素を相対的に識別します。私はあなたが各ブロックについて同じ構造を持つと仮定します。注：各ブロック<p/>タグにcontainerクラスを追加しました。

$(document).ready(function() { 
 
    $(".here").hide(); 
 
    $(".show").click(function() { 
 
     var container = $(this).closest(".container"); 
 
     container.find(".here").show(); 
 
     container.find(".icond").hide(); 
 
    }); 
 

 
    $(".hide").click(function() { 
 
     var container = $(this).closest(".container"); 
 
     container.find(".here").hide(); 
 
     container.find(".icond").show(); 
 
    }); 
 
});

p { 
 
    width:70%; 
 
    padding-left:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="container">This is my main text, this will display as a normal paragraph. If someone needs more information  <span class="show"> they would click here <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide"><strong>Wow!</strong> Clicking brings up more information. When they've had enough, they'll click again and it'll go away. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 

 
<p class="container">This is great and works exactly as I want it too but there is a problem <span class="show"> ... 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">I need this to work over and over for different paragraphs individually. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 
<p class="container">Targeting classes resulted in all paragraphs colapsing at the same time<span class="show"> and 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">Rewriting the function for a new set of ids each time cant be the best way to do this... 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 
<p class="container"><span class="show"> Please help! 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">I'm just starting out with JS, please be kind.. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p>

Answer 3

最善の解決策は、あなたがページ作成しているかに依存する場合があります（PHP、HTMLストレートを？）。あなたのためのいくつかのバニラのjavascript。私はPHPを使ってページを作成しているときにこのようなものを使用しますが、htmlの場合と同じように動作します。

<div onclick="myDropdown('extraSummary1');">my visible text -click for 
more</div> 
<div id="extraSummary1" style="display: none;">hidden extra text</div> 
<script> 
function myDropdown(theDiv){ 
if (document.getElementById(theDiv).style.display=='none') 
    { document.getElementById(theDiv).style.display='block'; } 
else { document.getElementById(theDiv).style.display='none'; } 
</script>