如何缩短这段代码？它可以工作，但我想编写更好的代码，但不知道如何组合这些功能。
$(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>
最佳答案
你可以有一个问题编号数组，然后通过循环处理它们
$(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>关于jQuery 结合多个函数以实现更简洁的编码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35354550/