简化用于选择性 jQuery 切换列表项的代码

Question

我正在尝试制作由 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.A)，class "selected" 将附加到该项目...

<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.

来压缩或简化我的代码

Answer 1

请试试这个 class 作业：

<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 Fiddle 来展示这个工作原理（我希望是你需要的方式）。

我希望这对您有所帮助。

Answer 2

这就是我的做法

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");
});

JSFIDDLE http://jsfiddle.net/w7x1hgq3/4/

已更新

简化用于选择性 jQuery 切换列表项的代码

Streamlining code for selective jQuery toggling of list items

css

php

jquery