JQueryのボタンを基準にdivをターゲットにする方法

Question

現在、入力の直後にdivを表示/非表示にするスクリプトを作成しようとしています。現時点では、すべての単一の入力とすべての単一のdivをIDでターゲティングしています（入力位置に対してdivをターゲットにするのではなく、少し重いかもしれません）。

だから、今、それは少し次のようになります。上の

jQuery(document).ready(function(){ 
    jQuery('#inputbutton1').on('click', function(event) {   
     jQuery('#divtarget1').toggle('show'); 
    }); 
}); 

jQuery(document).ready(function(){ 
    jQuery('#inputbutton2').on('click', function(event) {   
     jQuery('#divtarget2').toggle('show'); 
    }); 
}); 

ので。私は、イベントのターゲットを取ることができ、そこから、その入力ボタンへのの相対に到達する方法がありますか？そのように、ユニークなIDセレクタを持つ30個のスクリプトではなく、可変の値を持つ単一のスクリプトを使用します。各入力ボタン/ divのコンボは以下のように（彼らがページ点在しているが、常にペアで来る。）来る：事前に

<div class="hideshowdiv"><input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'></div> 
<div id="divtarget1" class="spellimg"><img src="image.jpg" alt="Image"></div> 

感謝。

Answer 1

次のコードを使用してください。これは柔軟性があり、追加するすべての新しい画像に対して機能します。

$(document).ready(function() { 
 
    $('input').on('click', function(event) { 
 
    $(this).parent().next().toggle('show'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hideshowdiv"> 
 
    <input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'> 
 
</div> 
 
<div id="divtarget1" class="spellimg"> 
 
    <img src="image.jpg" alt="Image"> 
 
</div> 
 

 
<div class="hideshowdiv"> 
 
    <input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'> 
 
</div> 
 
<div id="divtarget1" class="spellimg"> 
 
    <img src="image.jpg" alt="Image"> 
 
</div> 
 

 
<div class="hideshowdiv"> 
 
    <input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'> 
 
</div> 
 
<div id="divtarget1" class="spellimg"> 
 
    <img src="image.jpg" alt="Image"> 
 
</div>