Jqueryボタンを複数のボタンでクリックすることでdivを変更します

Question

私はすべてのジョブに対してyesとnoボタンを印刷するforeachループを持っています。私が把握しようとしているのは、ユーザーがyesをクリックしてその選択したジョブのdivを変更したときです。私が把握したことは、はいがクリックされたときにすべての仕事のdivを変更する方法です。 1つの仕事だけを変更するにはどうすればよいですか？ここに私のHTML

<div class = "interviewed-yes-no"> 
     <div> 
      <input class="interview-yes" type="submit" value="Yes" style="background:none!important;color:#2AACEA; 
          border:none; padding:0!important;"> 
      <input type="submit" value="No" style="background:none!important;color:#2AACEA; 
          border:none; padding:0!important;font: inherit;padding-right: 10% !important;"> 
    </div> 
</div> 
<div class ="date-of-interview" style="display: none;"> 
     <input id="interview-date" name="interview-date" placeholder="mm/dd/yyyy" type="bs-date" class="form-control" value=""> 
</div> 

であることはここでは一般的なセレクタを使用していない私のjqueryの

$(document).ready(function() { 
     $(".interview-yes").click(function() { 
      $('.interviewed-yes-no').hide(); 
      $('.date-of-interview').show(); 
     }) 
    }); 

Answer 1

です。代わりに.parent（）と.find（）を使用して、そのクイズに関連する要素のみを選択してください。例えば：

$(document).ready(function() { 
 
     $(".interview-yes").click(function() { 
 
      $(this).parent().parent().find('.interviewed-yes-no').hide(); 
 
      $(this).parent().parent().find('.date-of-interview').show(); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="question"> 
 
<div class = "interviewed-yes-no"> 
 
      <input class="interview-yes" type="submit" value="Yes" style="background:none!important;color:#2AACEA; 
 
          border:none; padding:0!important;"> 
 
      <input type="submit" value="No" style="background:none!important;color:#2AACEA; 
 
          border:none; padding:0!important;font: inherit;padding-right: 10% !important;"> 
 
</div> 
 
<div class ="date-of-interview" style="display: none;"> 
 
     <input id="interview-date" name="interview-date" placeholder="mm/dd/yyyy" type="bs-date" class="form-control" value=""> 
 
</div> 
 
</div> 
 
<div class="question"> 
 
<div class = "interviewed-yes-no"> 
 
      <input class="interview-yes" type="submit" value="Yes" style="background:none!important;color:#2AACEA; 
 
          border:none; padding:0!important;"> 
 
      <input type="submit" value="No" style="background:none!important;color:#2AACEA; 
 
          border:none; padding:0!important;font: inherit;padding-right: 10% !important;"> 
 
</div> 
 
<div class ="date-of-interview" style="display: none;"> 
 
     <input id="interview-date" name="interview-date" placeholder="mm/dd/yyyy" type="bs-date" class="form-control" value=""> 
 
</div> 
 
</div>