我正在尝试制作一个由PHP和jQuery提供支持的测验。下面是我的HTML示例：
<ul class="Answers UL1">
<li class="Answer A"></li>
<li class="Answer B"></li>
</ul>
<ul class="Answers UL2">
<li class="Answer A"></li>
<li class="Answer B"></li>
</ul>
<script>
$(document).ready(function(){
$(".UL1 li.A").click(function(){
$(".UL1 li.A").toggleClass("selected");
});
});
</script>
如果有人单击第一个问题 （ul.UL1），"选定"类将附加到该项目...
<li class="Answer A selected"></li>
但是，我想同时显示所有十个问题和相关答案。这意味着我必须编写 40 个 JS 脚本来涵盖每种可能的组合......
<script>
$(document).ready(function(){
$(".UL1 li.A").click(function(){
$(".UL1 li.A").toggleClass("selected");
});
});
// 38 similar scripts in between!
$(document).ready(function(){
$(".UL10 li.D").click(function(){
$(".UL10 li.D").toggleClass("selected");
});
});
</script>
我只是想知道是否有某种方法可以使用PHP，jQuery或CSS来压缩或简化我的代码。
这就是我会这样做的
.HTML
<ul class="Answers">
<li class="1-A" id="1">1 A</li>
<li class="1-B" id="1">1 B</li>
</ul>
<ul class="Answers">
<li class="2-A" id="2">2 A</li>
<li class="2-B" id="2">2 B</li>
</ul>
.JS
$(".Answers li").click(function () {
$("." + this.id + "-A").removeClass("selected");
$("." + this.id + "-B").removeClass("selected");
$(this).addClass("selected");
});
吉斯菲德尔http://jsfiddle.net/w7x1hgq3/4/
更新
请尝试以下课堂作业：
<ul class="Answers UL">
<li class="Answer A"></li>
<li class="Answer B"></li>
</ul>
<ul class="Answers UL">
<li class="Answer A"></li>
<li class="Answer B"></li>
</ul>
那么以下脚本（只有一个）应该足以涵盖这种情况：
<script>
$(document).ready(function(){
$(".UL li").click(function(){
$(this).toggleClass("selected");
});
});
</script>
这是一个简单的JS小提琴来展示这个工作（我希望你需要的方式）。
我希望这以任何方式有所帮助。