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），则选择＆＃34;＆＃34;将附加到该项目......

<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

请尝试此课程作业：

<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切换列表项的代码

2 个答案: