jqueryの表示を非表示にするか、ループの名前を付ける必要があります。

Question

私はサンプルサイトから手に入れた単純なhide show jqueryスクリプトを持っています。私は$（これ）を使用して横断しようとしています。表示/非表示にしたいdivをターゲットに設定します。私は、最初の失敗の後の何か、最初の不調のためにこの仕事をすることができました。私はコードを手こずらせてしまったので、私はそれが何をしようとしているのかを理解するために、以下の失敗の例をいくつか持っています。ここにコードがあります。

<script type="text/javascript"> 
//$(document).ready(function(){ 
// $("#hide").click(function(){ 
// $(this).('#hideShowParent > #hideShow').hide(); 
// }); 
// $("#show").click(function(){ 
// $(this).('#hideShowParent > #hideShow').show(); 
// }); 
//}); 
$(document).ready(function(){ 
$("#hide").click(function(){ 
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide(); 
}); 
$("#show").click(function(){ 
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide(); 
}); 
}); 
</script> 

ここでは、1つまたは2つ以上の可能性のあるものをループしています。私のjQueryのは、クリックされたボタンの親を対象と兄弟は、以下の最も近接呼ばhideShowをDIV見つけて、表示または非表示するために、私は（あまりにもトグル使用することができます。

<div id="hideShowParent"> 
<ul> 
<li> 
    <button id="show">Show</button> 
    - <button id="hide">Hide</button> 
    <b>Medium</b> 
     <div id="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 
<div id="hideShowParent"> 
<ul> 
<li> 
    <button id="show">Show</button> 
    - <button id="hide">Hide</button> 
    <b>Medium</b> 
     <div id="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 

感謝を事前に助けを求めたいと思います。私はこのすべてメイクセンスを願っています

はまず

Answer 1

あなたがそのようにid属性を使用する必要があります - IDは一意でなければなりませんので、私は複数のDOM要素に同じにすることができclass属性とそれらを置き換えます：。。

<div class="hideShowParent"> 
<ul> 
<li> 
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b> 
     <div class="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 
<div class="hideShowParent"> 
<ul> 
<li> 
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b> 
     <div class="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 

は、次のコードは動作します：

$(document).ready(function() { 
    $(".hide").click(function() { 
     $(this).siblings(".hideShow").hide(); 
    }); 
    $(".show").click(function() { 
     $(this).siblings(".hideShow").show(); 
    }); 
}); 

の作業例：http://jsfiddle.net/MztAm/