我的切换问题很小。我有一堆肯定和没有答案,并根据他们是否点击是或否,会出现更多问题。这个工作正常,直到我不得不在一个已经回答的问题中移动一些是和否的问题。
我的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/
任何帮助都会很棒!
答案 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 强>