jQuery 组合多个函数以实现更简洁的编码

Question

如何缩短这段代码？它可以工作，但我想编写更好的代码，但不知道如何组合这些功能。

$(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q01"]').is(':checked')) {
            $('.q01').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

 $(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q04"]').is(':checked')) {
            $('.q04').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

 $(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q07"]').is(':checked')) {
            $('.q07').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

HTML 很长，但我按要求添加了它。感谢您与我分享您的技能。

                <div id="multiplequestions" class="quiz">                    
                    <ol id="multiplequestions-start" class="quiz__list">                    
                        <!-- question 1 -->
                        <li id="multiplequestions-q01">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">1.</div>
                                    <div class="quiz__question-text">
                                      <p>Queston 1</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e01"/><label for="multiplequestions-q01-e01">Answer 1</label><br/>                          
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e02"/><label for="multiplequestions-q01-e02">Answer 1a</label><br/>
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e03"/><label for="multiplequestions-q01-e03">Answer 1b</label><br/>
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e04"/><label for="multiplequestions-q01-e04">Answer 1c</label><br/>
                                        <div class="q01 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                           
                        <!-- question 2 FREE TEXT-->
                        <li id="multiplequestions-q02">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">2.</div>
                                    <div class="quiz__question-text">
                                       <p>Question 2</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <textarea type="textarea" id="multiplequestions-q02-e01" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                        <!-- question 3 FREE TEXT -->
                        <li id="multiplequestions-q03">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">3.</div>
                                    <div class="quiz__question-text">
                                      Question 3
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                        <!-- question 4 -->
                        <li id="multiplequestions-q04">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">4.</div>
                                    <div class="quiz__question-text">
                                     Question 4
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e01"/><label for="multiplequestions-q04-e01">Answer 4a</label><br/> 
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e02"/><label for="multiplequestions-q04-e02">Answer 4b</label><br/>
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e03"/><label for="multiplequestions-q04-e03">Answer 4c</label><br/>
                                        <div class="q04 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>  
                        <!-- question 5 FREE TEXT -->
                        <li id="multiplequestions-q05">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">5.</div>
                                    <div class="quiz__question-text">
                                      <p>Queston 5</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                        <!-- question 6 FREE TEXT -->
                        <li id="multiplequestions-q06">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">6.</div>
                                    <div class="quiz__question-text">
                                        <p>Question 6</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- question 7 -->
                        <li id="multiplequestions-q07">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">7.</div>
                                    <div class="quiz__question-text">
                                        Question 7
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e01"/><label for="multiplequestions-q07-e01">Answer 7a</label><br/> 
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e02"/><label for="multiplequestions-q07-e02">Answer 7b</label><br/>
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e03"/><label for="multiplequestions-q07-e03">Answer 7c</label><br/>
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e04"/><label for="multiplequestions-q07-e04">Answer 7d</label><br/>
                                        <div class="q07 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                    </ol>
                    <!-- buttons -->
                    <div class="quiz__buttons">
                        <button id="check_activity" type="submit" class="quiz__check btn btn-primary feedme" title="Check my answers">Check</button>
                        <button type="reset" class="quiz__reset btn btn-default feednone" title="Clear my answers">Reset</button>
                    </div>
                </div>

Answer 1

你可以像下面这样写

$(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q01"]').is(':checked')) {
            $('.q01').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }

        if (!$('input[name="multiplequestions-q04"]').is(':checked')) {
            $('.q04').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }

        if (!$('input[name="multiplequestions-q07"]').is(':checked')) {
            $('.q07').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

Answer 2

你可以有一个问题编号数组，然后通过循环处理它们

$(function() {
  $('#check_activity').on('click', function(e) {
    ['01', '04', '07'].forEach(function(no) {
      $('.q' + no + ' .noBlank').remove();
      if (!$('input[name="multiplequestions-q' + no + '"]').is(':checked')) {
        $('.q' + no).append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
        e.preventDefault();
      }
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q01">
  <input name="multiplequestions-q01" type="radio" />
  <input name="multiplequestions-q01" type="radio" />
  <input name="multiplequestions-q01" type="radio" />
</div>
<div class="q04">
  <input name="multiplequestions-q04" type="radio" />
  <input name="multiplequestions-q04" type="radio" />
  <input name="multiplequestions-q04" type="radio" />
</div>
<div class="q07">
  <input name="multiplequestions-q07" type="radio" />
  <input name="multiplequestions-q07" type="radio" />
  <input name="multiplequestions-q07" type="radio" />
</div>
<button id="check_activity">Test</button>

Answer 3

将所有需要您 select 单选按钮的输入填入 class，例如 radio-required。然后你可以使用.each()循环处理它们。

$(function() {
    $('button#check_activity').on('click', function(e) {
        var button_groups = $.unique($('input.radio-required').map(function() {
            return this.name;
        }).get());
        $.each(button_groups, function(i, name) {
            if (!$('input[name=' + name + ']').is(':checked')) {
                var question = name.split('-')[1];
                $('.' + question).append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
                e.preventDefault();
            }
        });
    });
});

jQuery 组合多个函数以实现更简洁的编码

jQuery combining multiple functions for cleaner coding

html

jquery

dry