精简代码以选择性地切换列表项

Question

I'm trying to make a quiz powered by PHP and jQuery. Below is an example of my 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>

If someone clicks on the first list item (li.A) in the first question (ul.UL1), the class "selected" will be appended to that item...

<li class="Answer A selected"></li>

However, I want to display all ten questions and the associated answers simultaneously. That means I'd have to write 40 JS scripts to cover each possible combination...

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

I just wondered if there's some way to condense or streamline my code, using PHP, jQuery or CSS.

Answer 1

Please try this class assignment instead:

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

Then the following script (only one) should be enough to cover the situation:

<script>
$(document).ready(function(){
  $(".UL li").click(function(){
    $(this).toggleClass("selected");
});
});
</script>

Here is a simple JS Fiddle to show this working (I hope the way you needed).

I hope this helps in any way.

Answer 2

This is how I would do it

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/

Updated