jQuery找到最接近的类来显示div

时间:2013-12-03 16:18:29

标签: javascript html css

我的切换问题很小。我有一堆肯定和没有答案,并根据他们是否点击是或否,会出现更多问题。这个工作正常,直到我不得不在一个已经回答的问题中移动一些是和否的问题。

我的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/

任何帮助都会很棒!

1 个答案:

答案 0 :(得分: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