jQuery结合了多个函数以实现更清晰的编码

时间:2016-02-12 03:55:06

标签: jquery html dry

如何缩短此代码?它有效,但我想编写更好的代码,不知道如何组合这些功能。

$(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>

3 个答案:

答案 0 :(得分:3)

您可以拥有一组问题编号,然后通过循环来处理它们

&#13;
&#13;
$(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();
      }
    })
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

提供所有需要您选择类别单选按钮的输入,例如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();
            }
        });
    });
});

答案 2 :(得分:0)

你可以像下面那样写下

$(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();
        }
    });
});