Question

我是JavaScript和jQuery的新手。我知道我的代码不是最漂亮的，但我正试图从某个地方开始。

我有一系列问题一次显示一个，并且想要创建某种验证以防止用户在未选择第一个按钮上的单选按钮时转到下一个问题。

HTML （我有四个.questionContainers

<div class="questionContainer">

<div class="question">
     How much storage do you need?
</div>

 <div class="answers">
     <ul>
         <li>
             <label>
                 <input type="radio" id="storage">1GB or less
             </label>
         </li>

         <li>
             <label>
                 <input type="radio" id="storage">More than 1GB
             </label>
         </li>  
     </ul>
 </div>

 <div class="btnContainer">
     <div class="next">
         <a class="btnNext">Next</a>
     </div>
 </div>
</div>

的JavaScript

(function(){

    var Questions = {

        container : $('.questionContainer'),

        init : function() {

            this.start();

            if($('input[type=radio]:checked').length > 0){
                this.container.find('a.btnNext').on('click', this.next);
            }

        },

        start : function() {

            this.container.not(':first').addClass('hide');
        },

        next : function() {

            var container = $('.questionContainer');

            $(this).closest(container).hide(function(){
                $(this).closest(container).next().show();       
            });
        }
    };
    Questions.init();
})();

无效的具体行：

if($('input[type=radio]:checked').length > 0) {

   this.container.find('a.btnNext').on('click', this.next);
}

问题

当我添加if语句并单击下一个单选按钮时，它不会转到下一个问题。我没有在控制台中收到任何错误。

Answer 1

只有在调用启动函数时检查某些内容时，才会将绑定到click事件上（不是你想要的 - 除非你预先选择一个单选按钮，否则它将永远不会成立没有他们行动的用户）：

if($('input[type=radio]:checked').length > 0){ this.container.find('a.btnNext').on('click', this.next); }

请尝试将其替换为：

this.container.find('a.btnNext').on('click', function () { if($('input[type=radio]:checked').length > 0){ this.next(); } });

这种方式总是绑定到click事件，但绑定的函数只允许在调用函数时检查某些内容时调用next（即单击下一个按钮时）

jQuery如果选择单选按钮，则继续下一个元素

1 个答案: