使用jQuery處理相同的輸入組（顯示/隱藏）

Question

選中復選框時，我想在一個div中顯示/隱藏某些元素。 我想顯示div，但每個組分別顯示。 所有div的“ addNar ..”我通過用jquery追加來動態創建。

HTML代碼

<div id="naramky">
    <div id="addNar1">    
       <input type="checkbox" id="heart" name="heart[]" class="heart" value="1">
         <div id="srdce" class="srdce" style="display:none">
           <input type="text" id="srdce_farba" name="srdce_farba[]" />
         </div>
    </div>
    <div id="addNar2">    
       <input type="checkbox" id="heart" name="heart[]" class="heart" value="1">
         <div id="srdce" class="srdce" style="display:none">
           <input type="text" id="srdce_farba" name="srdce_farba[]" />
         </div>
    </div>
    <div id="addNar3">    
       <input type="checkbox" id="heart" name="heart[]" class="heart" value="1">
         <div id="srdce" class="srdce" style="display:none">
           <input type="text" id="srdce_farba" name="srdce_farba[]" />
         </div>
    </div>
</div>

js文件中的代碼

$('#naramky').on('click', '#heart', function() { 
   $('#srdce').toggle();

});

有誰能夠幫助我？

Answer 1

這是一個工作代碼：

$(document).on('click', 'input[name="heart[]"]', function() {
  $(this).parent().next('.srdce').toggle();
});

@AlivetoDie是您的，但我刪除了parent（）之一，您給我發了兩個類似“ parent（）。parent（）”的郵件