简化列表项的选择性 jQuery 切换代码答案

【问题标题】：Streamlining code for selective jQuery toggling of list items简化列表项的选择性 jQuery 切换代码
【发布时间】：2015-01-07 00:37:41
【问题描述】：

我正在尝试做一个由 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)，则“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 来压缩或简化我的代码。

【问题讨论】：

标签： php jquery css

【解决方案1】：

我会这样做

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>

$(".Answers li").click(function () {
    $("." + this.id + "-A").removeClass("selected");
    $("." + this.id + "-B").removeClass("selected");
    $(this).addClass("selected");
});

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

更新

【讨论】：

太棒了！他们都工作。我还有一个问题。我可以开始一个新线程，但我不想因为没有在这里问而受到指责。使用修改后的代码，如果用户选择问题 #1，答案 A，那么该列表项现在会突出显示。但是，如果用户选择了他们的想法并选择了问题 #1，答案 B，那么列表项 A 和 B 都会被突出显示。我想解决这个问题，以便仅突出显示用户的最后一个选择。有谁知道这是怎么做到的吗？让我知道我应该在这里问这个问题还是问一个新问题。谢谢！

【解决方案2】：

请尝试这个课堂作业：

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

我希望这对您有所帮助。

【讨论】：