选择单选按钮上的Bootstrap轮播无法在下一张幻灯片上工作，因为它在第一张幻灯片上正常工作

Question

我已经添加了bootstrap轮播，并在jQuery上添加了下一张幻灯片的条件，它在第一张幻灯片上工作正常，但在下一张幻灯片上它不起作用，下面是我的旋转木马的HTML：

<div id="carousel-personal-loan" class="carousel slide">
    <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
            <div class="row per-loan-gender">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row male_or_female">
                        <div class="quote-title">My gender</div>
                        <div class="col-xs-6 male">
                            <label>
                                <img src="1.png" />
                                <input type="radio" name="gender" id="male" value="male">
                                <span>Male</span>
                            </label>
                        </div>
                        <div class="col-xs-6 female">
                            <label>
                                <img src="2.png" />
                                <input type="radio" name="gender" id="female" value="female">
                                <span>Female</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
        <div class="item">
          <div class="row per-loan-city">
          <div class="quote-title">Where do you live currently?</div>
                <div class="col-xs-1"></div>
                <div class="col-xs-2">
                    <label>
                        <img src="3.png" width="130" height="130">
                        <input type="radio" name="livecity" id="hyderabad" value="hyderabad">
                        <span>Hyderabad</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="4.png" width="130" height="130">
                        <input type="radio" name="livecity" id="chennai" value="chennai">
                        <span>Chennai</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="5.png" width="130" height="130">
                        <input type="radio" name="livecity" id="bangalore" value="bangalore">
                        <span>Bangalore</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="6.png" width="130" height="130">
                        <input type="radio" name="livecity" id="hosur" value="hosur">
                        <span>Hosur</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="7.png" width="130" height="130">
                        <input type="radio" name="livecity" id="other_city" value="other city">
                        <span>Other City</span>
                    </label>
                </div>
                <div class="col-xs-1"></div>
            </div>
        </div>
         <div class="item">
          <div class="row per-loan-sources">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row sal_or_self">
                        <div class="quote-title">Are You</div>
                        <div class="col-xs-6 male">
                            <a href="#">
                                <img src="8.png" />
                                <span>Salaried</span>
                            </a>
                        </div>
                        <div class="col-xs-6 female">
                            <a href="#">
                                <img src="9.png" />
                                <span>Self-employed</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
        <div class="item">
<div class="row per-loan-sources">
    <div class="quote-title" msg="Required Loan amount">Required Loan amount(Sal)<span class="label label-danger"></span></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"><input type="text" name="loanAmount" id="loanAmount"/></div>
    <div class="col-xs-4"></div>
      </div>
         <div class="row nxt-prev-btn">
            <div class="col-xs-3"></div>
            <div class="col-xs-3">
            <button type="button" class="btn btn-default prev-slide">Previous</button>
            </div>
            <div class="col-xs-3"><button type="button" class="btn btn-default next-slide">Next</button></div>
            <div class="col-xs-3"></div>
            </div>
        </div>
        <div class="item">
          <div class="row per-loan-sources">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row male_or_female">
                        <div class="quote-title">Ever Defaulted on any Loan Or Credit card?</div>
                        <div class="col-xs-6 male">
                            <a href="#">
                                <img src="10.png" />
                                <span>Yes</span>
                            </a>
                        </div>
                        <div class="col-xs-6 female">
                            <a href="#">
                                <img src="11.png" />
                                <span>No</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
      </div>
<!-- Controls -->
      <a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

以下是我的jQuery代码：

  jQuery(document).ready(function(){
jQuery('#carousel-personal-loan').carousel({
    interval:false,
    wrap:false
});

jQuery('#carousel-personal-loan').on('slide.bs.carousel', function () {
    if (jQuery("input[name='gender']:checked").length<=0) {
            alert('Please select your gender');
            jQuery('#carousel-personal-loan').carousel('pause');
            return false;
        }
    else if (jQuery("input[name='gender']:checked").length>0){
        jQuery('#carousel-personal-loan').carousel('cycle');
        return true;
    }
    else if (jQuery("input[name='livecity']:checked").length<=0) {
        alert('Please select your city');
        jQuery('#carousel-personal-loan').carousel('pause');
        return false;
    }
    else{
        jQuery('#carousel-personal-loan').carousel('cycle');
        return true;
    }
});

}）;

正如您可以在http://dev.makemyloans.com/上检查报价贷款（测试）这里的条件，男性和女性工作正常，但当它转到下一张幻灯片时，它无法正常工作。

Answer 1

  

它在第一张幻灯片上工作正常，但在下一张幻灯片上它无法正常工作

这是因为您正在寻找整个轮播中的已检查单选按钮而不是当前活动轮播项目。 改变这一行：

jQuery("input[name='gender']:checked")

使用：

jQuery(this).find(".active :checked")

此外，使用bootstrap，您可以使用模式而不是javascript警报。您可以为每个轮播标题设置属性，如：

<div class="quote-title" msg="Please select your gender">My gender</div>

为了在那里有一个消息文本而不是动态地计算它。

当然有很多可能实现这一目标，但我建议这样做以简化您的代码：

$('#carousel-personal-loan').on('slide.bs.carousel', function (e) {
 if (jQuery(this).find(".active :checked").length<=0) {
     $('#msgModal').find('.modal-body p').text(jQuery(this).find(".active .quote-title").attr('msg'));
     $('#msgModal').modal('show');
     $('#carousel-personal-loan').carousel('pause');
     return false;
 }
 $('#carousel-personal-loan').carousel('cycle');
});

请记住添加模态div片段（请参阅片段末尾）。

jQuery(document).ready(function(){
    jQuery('#carousel-personal-loan').carousel({
        interval:false,
        wrap:false
    });

    jQuery('#carousel-personal-loan').on('slide.bs.carousel', function (e) {
        if (jQuery(this).find(".active :checked").length<=0) {
            $('#msgModal').find('.modal-body p').text(jQuery(this).find(".active .quote-title").attr('msg'));
            $('#msgModal').modal('show');
            jQuery('#carousel-personal-loan').carousel('pause');
            return false;
        }
        jQuery('#carousel-personal-loan').carousel('cycle');
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="carousel-personal-loan" class="carousel slide">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="row per-loan-gender">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row male_or_female">
                        <div class="quote-title" msg="Please select your gender">My gender</div>
                        <div class="col-xs-6 male">
                            <label>
                                <img src="1.png" />
                                <input type="radio" name="gender" id="male" value="male">
                                <span>Male</span>
                            </label>
                        </div>
                        <div class="col-xs-6 female">
                            <label>
                                <img src="2.png" />
                                <input type="radio" name="gender" id="female" value="female">
                                <span>Female</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
        <div class="item">
            <div class="row per-loan-city">
                <div class="quote-title" msg="Please select the place where you live.">Where do you live currently?</div>
                <div class="col-xs-1"></div>
                <div class="col-xs-2">
                    <label>
                        <img src="3.png" width="130" height="130">
                        <input type="radio" name="livecity" id="hyderabad" value="hyderabad">
                        <span>Hyderabad</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="4.png" width="130" height="130">
                        <input type="radio" name="livecity" id="chennai" value="chennai">
                        <span>Chennai</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="5.png" width="130" height="130">
                        <input type="radio" name="livecity" id="bangalore" value="bangalore">
                        <span>Bangalore</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="6.png" width="130" height="130">
                        <input type="radio" name="livecity" id="hosur" value="hosur">
                        <span>Hosur</span>
                    </label>
                </div>
                <div class="col-xs-2">
                    <label>
                        <img src="7.png" width="130" height="130">
                        <input type="radio" name="livecity" id="other_city" value="other city">
                        <span>Other City</span>
                    </label>
                </div>
                <div class="col-xs-1"></div>
            </div>
        </div>
        <div class="item">
            <div class="row per-loan-sources">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row sal_or_self">
                        <div class="quote-title" msg="Please select: Are you....">Are You</div>
                        <div class="col-xs-6 male">
                            <a href="#">
                                <img src="8.png" />
                                <input type="radio" name="areyou" value="...">
                                <span>Salaried</span>
                            </a>
                        </div>
                        <div class="col-xs-6 female">
                            <a href="#">
                                <img src="9.png" />
                                <input type="radio" name="areyou" value="...">
                                <span>Self-employed</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
        <div class="item">
            <div class="row per-loan-sources">
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                    <div class="row male_or_female">
                        <div class="quote-title"  msg="Please select default on loan...">Ever Defaulted on any Loan Or Credit card?</div>
                        <div class="col-xs-6 male">
                            <a href="#">
                                <img src="10.png" />
                                <input type="radio" name="defonloan" value="...">
                                <span>Yes</span>
                            </a>
                        </div>
                        <div class="col-xs-6 female">
                            <a href="#">
                                <img src="11.png" />
                                <input type="radio" name="defonloan" value="...">
                                <span>No</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--  MODAL ADDED  -->
<div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- MODAL END -->