如何在div中針對div相對於按鈕

Question

我目前正在嘗試製作一個能夠在輸入下隱藏/顯示div的腳本。目前，我通過ID將每個輸入和每個div都作爲目標（我發現這可能有點沉重，而不是將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'); 
    }); 
}); 

等。有沒有辦法，我可以採取，比如說，event.target，並從那裏，達到相對 div 該輸入按鈕。這樣，我將擁有一個具有變量值的腳本，而不是具有唯一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>