Question

我有一种问题，大多数只是YES或NO类型的回复。我有所有问题都工作，并且YES NO切换工作也是如此。出于某种原因，虽然当我得到问题3并选择一个选项时，它会将活动类添加到该按钮，但是如果我单击屏幕上的任何其他位置，它会删除该活动类。不知道为什么会这样做。如果用户选择“是”，问题3也是第一个出现子问题的问题。

HTML：

    <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
                <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group btn-toggle">
                    <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
                </div>
            </div>

           <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3">
                <p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group" data-toggle="buttons">
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button>

                    <div class="row">
                        <div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question">
                            <p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p>
                            <input name="radio" type='hidden' value="Yes"/>
                            <input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?">
                        </div>
                    </div>
                </div>
            </div>

JS：

    $('.yes-no').click(function(){
    $(this).closest('div').find('.yes-no').each(function(){
        $(this).removeClass('active');
    });

    $(this).addClass('active');


    $(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();

});

Answer 1

在HTML中 - 您忘记将类btn-toggle添加到第二个按钮组的DIV父级：

<强> jsBin demo

jQuery的：

$('.yes-no').click(function(){

  $(this).addClass('active').siblings().removeClass('active');
  $(this).closest('div').find('.sub-question').toggle(this.value==='yes');

});

鼠标单击删除某些问题的活动课程

1 个答案: