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() { 
 
    $('#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 2

你可以把它寫像下面

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

給所有處理它需要你選擇一個類的單選按鈕的輸入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(); 
      } 
     }); 
    }); 
});