同じページの複数の要素に対してJquery Hide＆Showを使用する

Question

こんにちは私は、異なるテキストを隠すために、非表示と複数回の表示機能を使用するページを作成しようとしています。私はw3schoolsのチュートリアルに続き、コードを編集して動作させました。しかし、hideとshow関数はテキストの最初の部分だけで動作し、他の部分では機能しません。 ここに私のコードです

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
    $("p").hide(); 
    }); 
$("#show").click(function(){ 
    $("p").show(); 
    }); 
}); 
</script> 
<div class="questions" id="question-1"> 
    <h1>Question</h1> 
</div> 
<p> 
    answer</p> 
<div id="hide"> 
    Hide</div> 
<div id="show"> 
    Show</div> 
<div class="questions" id="question-2"> 

     <h1>Question</h1> 
</div> 
<p> 
    Answer</p> 
<div id="hide"> 
    Hide</div> 
<div id="show"> 
    Show</div> 

なぜこれが起こっているのか知っていますか？

Answer 1

クラスの代わりにIDを使用しているためです。 idはHTMLページに一度存在することが許されています。

コメントのために、あなたはこのような属性とそれらを関連付けることができ、[OK]を：あなたのスクリプトで

<p rel='answer_1'>Answer</p> 
<div class="hide" answer='1'>Hide</div> 
<div class="show" answer='1'>Show</div> 

、その後：

$(".hide").click(function(){ 
    $("p[rel='answer_" + $(this).attr("answer") + "']").hide(); 
}); 

$(".show").click(function(){ 
    $("p[rel='answer_" + $(this).attr("answer") + "']").show(); 
}); 

Answer 2

、これまで複数の要素に同じIDを使用しないでください。私はあなたのコードを1つまたは2つ変更して、うまくいくものを作りました。表示/非表示リンクにdata属性を導入しました。その値は関連する回答によって共有されています。これで、showまたはhideがクリックされたときにdata-id属性の値を取得し、その値からjQueryセレクタを生成することができます。これをDRYするのにもっとたくさんのことがありますが、それは正しい方向への第一歩です。

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hide").click(function(){ 
    var id = $(this).attr('data-id'); 
    $("p." + id).hide(); 
    }); 
$(".show").click(function(){ 
    var id = $(this).attr('data-id'); 
    $("p." + id).show(); 
    }); 
}); 
</script> 

<div class="questions" id="question-1"> 
<h1>Question</h1> 
</div> 

<p data-id='answer-a'>answer</p> 
<div class="hide" data-id='answer-a'>Hide</div> 
<div class="show" data-id='answer-a'>Show</div>