javascript - jQuery 找到最接近的类来显示一个 div

Question

我的切换有一个小问题。我有一堆是和否的答案，根据他们是否单击是或否，会出现更多问题。在我不得不将一些是和否问题移到已经回答的问题中之前，这一直很好用。

我的 html 看起来有点像这样

 <div class="form-group">
    <label for="authorCover">
        Are you amazing? (Optional)
    </label>
    <button class="btn btn-small btn-success coverBtn yesBtn">Yes</button>
    <button class="btn btn-small btn-danger coverBtn noBtn">No</button>
    <p class="clearix"></p>
    <div class="answYes">
      <label for="upload">
        Please Upload your amazing here!
      </label>
      <input type="file" class="form-control" name="upload" value="" />
    </div><!--.answYes-->
    <div class="answNo">


   <div class="form-group">
     <label for="authorCover">
        Are you awesome? (Optional)
     </label>
     <button class="btn btn-small btn-success coverBtn yesBtn">Yes</button>
     <button class="btn btn-small btn-danger coverBtn noBtn">No</button>
     <p class="clearix"></p>
     <div class="answYes">
       <label for="awesome">
        Please Upload your awesomeness here
       </label>
       <input type="file" class="form-control" name="awesome" value="" />
     </div><!--.answYes-->
     <div class="answNo">no</div>
   </div><!--.form-group-->
  </div><!--.answNo-->
</div><!--.form-group-->

我的 jQuery 看起来像这样

$('.yesBtn').on('click', function(){
  $(this).parent().find('.answYes').toggle();
  $(this).parent().find('.answNo').hide();
  return false;
});

$('.noBtn').on('click', function(){
  $(this).parent().find('.answNo').toggle();
  $(this).parent().find('.answYes').hide();
  return false;
});

为了更清楚一点，我制作了一个 jsFiddel http://jsfiddle.net/pusKM/

任何帮助都会很棒!

Answer 1

尝试使用 .closest('.form-group') 而不是 .parent()

$('.yesBtn').on('click', function () {
    $(this).closest('.form-group').find('.answYes').toggle();
    $(this).closest('.form-group').find('.answNo').hide();
    return false;
});
$('.noBtn').on('click', function () {
    $(this).closest('.form-group').find('.answNo:first').toggle();
    $(this).closest('.form-group').find('.answYes').hide();
    return false;
});

jsFiddle example